@font-face {
  font-family: "JetBrainsMono-ExtraLight";
  src: url("/assets/JetBrainsMono-ExtraLight-5e2e0622.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono-Light";
  src: url("/assets/JetBrainsMono-Light-0501a1ef.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono-Regular";
  src: url("/assets/JetBrainsMono-Regular-4033b793.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono-Medium";
  src: url("/assets/JetBrainsMono-Medium-d7fe8bd8.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono-SemiBold";
  src: url("/assets/JetBrainsMono-SemiBold-631f5b68.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono-Bold";
  src: url("/assets/JetBrainsMono-Bold-2bfa6ed5.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono-ExtraBold";
  src: url("/assets/JetBrainsMono-ExtraBold-8fd445ad.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway Light";
  src: url("/app/assets/fonts/Raleway/static/Raleway-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Raleway Medium";
  src: url("/app/assets/fonts/Raleway/static/Raleway-Medium.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Raleway Semi-Bold";
  src: url("/app/assets/fonts/Raleway/static/Raleway-SemiBold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Raleway Bold";
  src: url("/app/assets/fonts/Raleway/static/Raleway-Bold.ttf");
  font-weight: 900;
  font-style: normal;
}
/*
* Color Variables
*/
/**
* Device breakpoints
*/
/**
* Mixin that dynamically produces media queries based on breakpoint parameters
*/
.button {
  font-family: "JetBrainsMono-ExtraLight";
  gap: 10px;
  background-color: white;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  color: #5d2f55;
  font-size: 16px;
  padding: 15px;
}
@media (min-width: 1422px) {
  .button {
    padding: 15px;
  }
}

.header {
  top: 0;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  vertical-align: middle;
  background-color: #5d2f55;
  position: sticky;
  z-index: 12;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .header {
    height: 130px;
    align-items: flex-start;
    padding-top: 10px;
  }
}

.headerLogo {
  width: 120px;
  height: 33.06px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .headerLogo {
    width: 90px;
    height: 28px;
    margin: 8px;
  }
}

.navContainer {
  width: 538px;
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .navContainer {
    width: 380px;
    height: 34px;
    gap: 8px;
    flex-wrap: wrap;
  }
}

.navLinks {
  font-family: "JetBrainsMono-ExtraLight";
  color: white;
  font-size: 16px;
  padding: 12px;
  transition: 1s;
}
.navLinks:hover {
  background-color: #3d1a37;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .navLinks {
    font-size: 14px;
    padding: 8px;
  }
}

.inputWrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.headerInput {
  width: 240px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 40px;
  background-color: #5d2f55;
  border: 1px solid white;
  color: white;
}
.headerInput::placeholder {
  font-family: "JetBrainsMono-Light";
  color: #a08f9d;
  font-size: 14px;
}
.headerInput-mobile {
  width: 180px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 40px;
  background-color: #5d2f55;
  border: 1px solid white;
  color: white;
}
.headerInput-mobile::placeholder {
  font-family: "JetBrainsMono-Light";
  color: #a08f9d;
  font-size: 12px;
}
.userActions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 150px;
  height: 34px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .userActions {
    flex-wrap: wrap;
    margin-left: 20px;
  }
}
@media (min-width: 1422px) {
  .userActions {
    width: 280px;
    gap: 10px;
  }
}

.searchIcon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
}

.cartIconAndQuantity {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.cartIconAndQuantity .cartIcon {
  width: 24px;
  height: 22.9px;
}
.cartIconAndQuantity .quantity {
  font-size: 16px;
  color: white;
  margin-left: 11px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .cartIconAndQuantity {
    margin: 5px;
  }
}

.loginButton {
  font-family: "JetBrainsMono-ExtraLight";
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10;
  padding: 12px;
  font: 16px;
  font-weight: 400;
  width: 83px;
  height: 34px;
  background-color: #5d2f55;
  border: none;
  color: white;
  transition: 1s;
}
.loginButton:hover {
  background-color: #3d1a37;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .loginButton {
    margin: 5px;
    padding: 10px;
    font: 12px;
    width: 75px;
    height: 30px;
  }
}

.quantityLoading {
  width: 14px;
  height: 22px;
  background-color: #3d1a37;
  margin-left: 7px;
  border-radius: 0.2px;
}

.userActionsWebLoggedIn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 150px;
  height: 34px;
  position: relative;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .userActionsWebLoggedIn {
    flex-wrap: wrap;
    margin-left: 20px;
  }
}
@media (min-width: 1422px) {
  .userActionsWebLoggedIn {
    width: 280px;
    gap: 10px;
  }
}

.userDropdownContainerWeb {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 15px;
  height: 40px;
  border: 1px solid white;
  border-radius: 10px;
  padding: 10px;
  min-width: 142px;
  max-width: 200px;
  z-index: 11;
  position: relative;
}

.userDropdownUsernameWeb {
  font-family: "JetBrainsMono-Light";
  font-size: 13px;
  color: white;
}

.dropdownMenuWrapper {
  font-family: "JetBrainsMono-Light";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 100%;
  right: 0;
  z-index: 1000;
  font-size: 13px;
  color: white;
  padding: 10px;
  min-width: 142px;
  max-width: 200px;
  background-color: #3d1a37;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .dropdownMenuWrapper {
    top: 100%;
    right: 0;
  }
}

.usermenuitem {
  width: 100%;
  padding: 8px 12px;
  text-decoration: none;
  color: white;
  transition: background-color 0.2s ease;
}
.usermenuitem:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.searchWebWrapper {
  width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px;
  gap: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-top: 5px;
  max-height: 400px;
  overflow-y: auto;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .searchWebWrapper {
    width: 240px;
  }
}
@media (min-width: 1422px) {
  .searchWebWrapper {
    width: 240px;
  }
}

.searchResultCard {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 12px;
  border: 1px solid #e5e7eb;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: white;
}
.searchResultCard:hover {
  background-color: #f9fafb;
  border-color: #5d2f55;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.searchResultCard:last-child {
  margin-bottom: 0;
}

.searchTitleWeb {
  font-family: "JetBrainsMono-Bold";
  font-size: 13px;
  color: #5d2f55;
  margin: 0 0 4px 0;
  line-height: 1.2;
  word-break: break-word;
}

.searchTitleStoreNameWeb {
  font-family: "JetBrainsMono-Regular";
  font-size: 11px;
  color: #836c7f;
  margin: 0;
  line-height: 1.2;
}

.searchResultDetails {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.searchResultDetails a {
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.searchResultDetails a:hover {
  text-decoration: none;
}

.cartCardImage-small {
  width: 90px;
  height: 136.9;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  cursor: pointer;
}

.cartCardImage-small-placeholder {
  width: 90px;
  height: 136.9;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  cursor: pointer;
}

.searchMobileWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px;
  gap: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-top: 5px;
  max-height: 400px;
  overflow-y: auto;
}

.cartCardImage-mobile {
  width: 60px;
  height: 93px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.cartCardImage-mobile-placeholder {
  width: 60px;
  height: 93px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.searchTitleMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 12px;
  color: #5d2f55;
  margin: 0 0 4px 0;
  line-height: 1.2;
  word-break: break-word;
}

.searchTitleStoreNameMobile {
  font-family: "JetBrainsMono-Regular";
  font-size: 9px;
  color: #836c7f;
  margin: 0;
  line-height: 1.2;
}

.headerMobileParent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #5d2f55;
  width: 100%;
  height: 64px;
  padding: 20px;
  position: fixed;
  top: 0;
  z-index: 10;
}

.headerMobileRightSideContent {
  margin: 10px;
  display: flex;
  flex-direction: row;
  gap: 18px;
}

.headerMobileLogo {
  width: 93px;
  height: 28px;
}

.searchIconMobile {
  height: 24px;
  width: 24px;
}

.footerWrapper {
  width: 100%;
  height: 401px;
  background-image: url("/background/footer-grainy-background.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #3d1a37;
  display: flex;
  position: relative;
}

.footerTopContentWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 60px;
  margin: 40px;
}
@media (min-width: 576px) and (max-width: 768px) {
  .footerTopContentWrapper {
    gap: 20px;
    margin: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1422px) {
  .footerTopContentWrapper {
    gap: 14px;
    margin: 15px;
  }
}

.footerBottomContentWrapper {
  width: 100%;
  height: 85px;
  background-color: #54304e;
  position: absolute;
  bottom: 0;
}

.footerLogo {
  width: 120px;
  height: 33px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .footerLogo {
    width: 80px;
    height: 28px;
  }
}

.footerTagline {
  font-family: "JetBrainsMono-Regular";
  margin-top: 20px;
  color: white;
  font-size: 16px;
  width: 290px;
  height: auto;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .footerTagline {
    font-size: 10px;
    width: 180px;
  }
}

.footerSocialsWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
}

.followUsText {
  color: white;
  font-family: "JetBrainsMono-Bold";
  font-size: 18px;
}

.footerSocialsIcons {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 18px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .footerSocialsIcons {
    gap: 8px;
  }
}
.footerSocialsIcons .socialIcon {
  max-width: 24px;
  max-height: 24px;
}
@media (min-width: 576px) and (max-width: 1422px) {
  .footerSocialsIcons .socialIcon {
    max-width: 12px;
    max-height: 12px;
  }
}

.footerLinksTable table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: center;
  table-layout: auto;
}
.footerLinksTable th,
.footerLinksTable td {
  padding: 12px 20px;
  color: white;
  white-space: nowrap;
}
.footerLinksTable th :hover,
.footerLinksTable td :hover {
  color: #e1beff;
}
.footerLinksTable th {
  font-size: 18px;
  font-family: "JetBrainsMono-Bold";
}
.footerLinksTable td {
  font-size: 16px;
  font-family: "JetBrainsMono-Regular";
}
@media (min-width: 576px) and (max-width: 1422px) {
  .footerLinksTable th,
  .footerLinksTable td {
    padding: 6px 10px;
    color: white;
    white-space: nowrap;
  }
  .footerLinksTable th :hover,
  .footerLinksTable td :hover {
    color: #e1beff;
  }
  .footerLinksTable th {
    font-size: 12px;
    font-family: "JetBrainsMono-Bold";
  }
  .footerLinksTable td {
    font-size: 10px;
    font-family: "JetBrainsMono-Regular";
  }
}

.newsletterSignup {
  font-family: "JetBrainsMono-Regular";
  width: 434px;
  height: 220px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding-left: 30px;
  position: relative;
}
@media (max-width: 576px) {
  .newsletterSignup {
    width: 363px;
    height: 219px;
    align-self: center;
    padding-left: 10px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .newsletterSignup {
    width: 280px;
    height: 180px;
    padding-left: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1422px) {
  .newsletterSignup {
    width: 250px;
    height: 180px;
    padding-left: 10px;
  }
}

.newsLetterSignupTitle {
  color: #3d1a37;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
@media (max-width: 576px) {
  .newsLetterSignupTitle {
    font-size: 22px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsLetterSignupTitle {
    font-size: 12px;
  }
}

.newsLetterSignupTagline {
  color: #9a8897;
  font-size: 16px;
  font-family: "JetBrainsMono-Regular";
}
@media (max-width: 576px) {
  .newsLetterSignupTagline {
    font-size: 14px;
    font-family: "JetBrainsMono-Regular";
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsLetterSignupTagline {
    font-size: 10px;
  }
}

.newsletterInput {
  width: 262px;
  height: 44px;
  border: 1px solid #d8d5e3;
  border-radius: 3px;
  padding-left: 10px;
}
@media (max-width: 576px) {
  .newsletterInput {
    width: 233px;
    height: 44px;
    font-size: 14px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .newsletterInput {
    width: 133px;
    height: 44px;
    font-size: 10px;
    padding-left: 0px;
  }
}
@media (min-width: 768px) and (max-width: 1422px) {
  .newsletterInput {
    width: 150px;
    height: 34px;
    font-size: 10px;
    padding-left: 0px;
  }
}

.newsletterButton {
  width: 107px;
  height: 44px;
  background-color: #3d1a37;
  color: white;
  border-radius: 3px;
}
@media (max-width: 576px) {
  .newsletterButton {
    font-size: 14px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .newsletterButton {
    font-size: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1422px) {
  .newsletterButton {
    width: 70px;
    height: 34px;
    font-size: 10px;
  }
}

.inputAndButton {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.subscribeIcon {
  position: absolute;
  top: 20px;
  right: 45px;
}
@media (max-width: 576px) {
  .subscribeIcon {
    right: 10px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .subscribeIcon {
    width: 50px;
    top: 5px;
    right: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1422px) {
  .subscribeIcon {
    width: 30px;
    top: 41px;
    right: 10px;
  }
}
@media (max-width: 480px) {
  .subscribeIcon {
    top: 15px;
  }
}

.footerBottomContent {
  font-family: "JetBrainsMono-Regular";
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  gap: 8px;
}
@media (max-width: 1422px) {
  .footerBottomContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    gap: 8px;
    font-family: "JetBrainsMono-Regular";
    background-color: #54304e;
    padding: 15px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .footerBottomContent {
    text-align: center;
  }
}

.footerBottomFlexRowText {
  display: flex;
  flex-direction: row;
}

.whiteText {
  color: white;
  font-size: 14px;
}

.mainColorText {
  color: #e1beff;
  font-size: 14px;
}
@media (max-width: 576px) {
  .mainColorText {
    text-align: center;
  }
}

.footerWrapperMobile {
  width: 100%;
  background-image: url("/background/footer-grainy-background.svg");
  background-color: #3d1a37;
  background-repeat: repeat-y;
  position: relative;
  top: 50px;
}

.footerContentWrapperMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  padding: 30px 10px;
}

.groupOfLinks {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: white;
  font-family: "JetBrainsMono-Regular";
  gap: 13px;
}

.newsletterSignupMobile {
  font-family: "JetBrainsMono-Regular";
  width: 434px;
  height: 220px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding-left: 30px;
  position: relative;
}
@media (max-width: 576px) {
  .newsletterSignupMobile {
    width: 363px;
    height: 219px;
    align-self: center;
    padding-left: 10px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsletterSignupMobile {
    width: 280px;
    height: 180px;
  }
}

.newsLetterSignupTitleMobile {
  color: #3d1a37;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
@media (max-width: 576px) {
  .newsLetterSignupTitleMobile {
    font-size: 22px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsLetterSignupTitleMobile {
    font-size: 12px;
  }
}

.newsLetterSignupTaglineMobile {
  color: #9a8897;
  font-size: 16px;
  font-family: "JetBrainsMono-Regular";
}
@media (max-width: 576px) {
  .newsLetterSignupTaglineMobile {
    font-size: 14px;
    font-family: "JetBrainsMono-Regular";
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsLetterSignupTaglineMobile {
    font-size: 10px;
  }
}

.newsletterInputMobile {
  width: 262px;
  height: 44px;
  border: 1px solid #d8d5e3;
  border-radius: 3px;
  padding-left: 10px;
}
@media (max-width: 576px) {
  .newsletterInputMobile {
    width: 233px;
    height: 44px;
    font-size: 14px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsletterInputMobile {
    width: 133px;
    height: 44px;
    font-size: 10px;
  }
}

.newsletterButtonMobile {
  width: 107px;
  height: 44px;
  background-color: #3d1a37;
  color: white;
  border-radius: 3px;
  width: 95px;
  height: 44px;
}
@media (max-width: 576px) {
  .newsletterButtonMobile {
    font-size: 14px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .newsletterButtonMobile {
    font-size: 10px;
  }
}

.inputAndButtonMobile {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.subscribeIconMobile {
  position: absolute;
  top: 20px;
  right: 45px;
}
@media (max-width: 576px) {
  .subscribeIconMobile {
    right: 10px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .subscribeIconMobile {
    width: 50px;
    top: 5px;
    right: 20px;
  }
}
@media (max-width: 480px) {
  .subscribeIconMobile {
    top: 15px;
  }
}

.mainSectionWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 632px;
  background-image: url("/background/loading.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.36;
}
@media (min-width: 480px) and (max-width: 576px) {
  .mainSectionWrapper {
    width: 100%;
    height: 200px;
    min-height: unset;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media (max-width: 480px) {
  .mainSectionWrapper {
    width: 100%;
    height: 200px;
    min-height: unset;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.mainSectionWrapperWebLoading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 632px;
  background-image: url("/background/loading.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.36;
  background-color: #a08f9d;
}
@media (max-width: 480px) {
  .mainSectionWrapperWebLoading {
    width: 100%;
    height: 200px;
    min-height: unset;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.mainSectionBackground {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 632px;
  background-image: url("/background/main-section-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 480px) and (max-width: 576px) {
  .mainSectionBackground {
    width: 100%;
    height: 200px;
    min-height: unset;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media (max-width: 480px) {
  .mainSectionBackground {
    top: 64px;
    width: 100%;
    height: 200px;
    min-height: unset;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.taglineMain {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  text-align: center;
  font-family: "JetBrainsMono-Bold";
  font-weight: 700;
  color: white;
  font-size: 4rem;
  line-height: 86.8px;
  width: 80%;
  text-shadow: -3px 4px 0px rgb(0, 0, 0);
  letter-spacing: -3px;
  flex-wrap: wrap;
}

.subheadingMain {
  text-align: center;
  font-family: "JetBrainsMono-Bold";
  font-weight: 400;
  color: white;
  font-size: 2rem;
  line-height: 43.4px;
  width: 70%;
  text-shadow: -3px 4px 0px rgb(0, 0, 0);
  letter-spacing: -3px;
}

.taglinesMobileWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
@media (min-width: 576px) {
  .taglinesMobileWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}

.taglineMainMobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  font-family: "JetBrainsMono-Bold";
  color: white;
  line-height: 86.8px;
  width: 80%;
  text-shadow: -2px 3px 0px rgb(0, 0, 0);
  width: 95%;
  font-size: 21px;
  position: inherit;
  line-height: 30px;
  letter-spacing: -2px;
}
@media (min-width: 576px) {
  .taglineMainMobile {
    text-align: center;
    font-family: "JetBrainsMono-Bold";
    font-weight: 700;
    color: white;
    font-size: 2.5rem;
    line-height: 86.8px;
    max-width: 80%;
    text-shadow: -3px 4px 0px rgb(0, 0, 0);
    letter-spacing: -3px;
  }
}

.subheadingMainMobile {
  text-align: center;
  color: white;
  line-height: 43.4px;
  text-shadow: -2px 3px 0px rgb(0, 0, 0);
  font-family: "JetBrainsMono-Bold";
  width: 95%;
  line-height: 21px;
  font-size: 14px;
  position: inherit;
  letter-spacing: -1px;
}
@media (min-width: 576px) {
  .subheadingMainMobile {
    text-align: center;
    font-family: "JetBrainsMono-Bold";
    font-weight: 400;
    color: white;
    font-size: 1.8rem;
    line-height: 43.4px;
    max-width: 70%;
    text-shadow: -3px 4px 0px rgb(0, 0, 0);
    letter-spacing: -3px;
  }
}

.progressBar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 175px;
  height: 9px;
  gap: 5px;
}

.progressBarSection {
  width: 40px;
  height: 9px;
}
@media (max-width: 480px) {
  .progressBarSection {
    width: 25px;
    height: 5px;
  }
}

.taglineAndProgressBar {
  position: absolute;
  bottom: 65px;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
@media (max-width: 576px) {
  .taglineAndProgressBar {
    bottom: 20px;
    gap: 20px;
  }
}
@media (min-width: 1440px) {
  .taglineAndProgressBar {
    bottom: 90px;
  }
}

.titleAndButtonsCommon {
  gap: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.titleAndButtonsCommon .sectionTitle {
  color: #5d2f55;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
.titleAndButtonsCommon .arrowWrapperOne {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.titleAndButtonsCommon img {
  width: 7.06px;
  height: 14.03px;
}

.viewAllButton {
  font-family: "JetBrainsMono-Bold";
  background-color: white;
  border: 1px solid #d2d2d2;
  font-size: 16px;
  color: #5d2f55;
  font-weight: 600;
  padding: 8px 20px;
}
.viewAllButton:hover {
  border: 1px solid black;
}

.backAndForwardButtonsWeb {
  gap: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
.backAndForwardButtonsWeb button {
  font-family: "JetBrainsMono-Bold";
  background-color: white;
  border: 1px solid #d2d2d2;
  font-size: 16px;
  color: #5d2f55;
  padding-top: 14px;
  padding-right: 17px;
  padding-bottom: 14px;
  padding-left: 17px;
}
.backAndForwardButtonsWeb button:hover {
  border: 1px solid black;
}

.webApp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-family: "JetBrains Mono", monospace;
  width: 100%;
}

.applicationTagline {
  font-family: "JetBrainsMono-Medium";
  font-size: 16x;
  align-self: flex-start;
  margin-left: 30px;
  margin-top: 20px;
  color: #6d6c6c;
}

.appMarketingBackgroundWeb {
  background-color: #faf4ff;
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.appDownloadButton {
  position: absolute;
  bottom: 320px;
  left: 75%;
  width: 14%;
  height: 7%;
}
@media (min-width: 576px) and (max-width: 768px) {
  .appDownloadButton {
    bottom: 300px;
    left: 78%;
    width: 14%;
    height: 7%;
  }
}
@media (min-width: 768px) and (max-width: 1280px) {
  .appDownloadButton {
    bottom: 300px;
    left: 77%;
    width: 14%;
    height: 7%;
  }
}
@media (min-width: 1280px) and (max-width: 1880px) {
  .appDownloadButton {
    bottom: 300px;
    left: 72%;
    width: 14%;
    height: 7%;
  }
}
@media (min-width: 1880px) {
  .appDownloadButton {
    bottom: 320px;
    left: 65%;
    width: 14%;
    height: 7%;
  }
}
@media (min-width: 2400px) {
  .appDownloadButton {
    left: 63%;
  }
}

.appDownloadButtonMobile {
  width: 178px;
  height: 52px;
  position: absolute;
  top: 140px;
  right: 105px;
}

.appMarketingBackgroundMobile {
  background-color: #faf4ff;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.qrCodeAndButton {
  position: relative;
}

.qrCodeImage {
  margin-top: 30px;
  position: relative;
}

.comicsPageLayoutWrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  width: 100%;
  padding: 20px;
}

.genrePageListWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px;
  justify-content: center;
  align-items: center;
}

.comicsPageListWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px;
}

.newReleaseCardOne {
  position: relative;
  width: 262px;
  height: 471px;
  border-radius: 8px;
  padding: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.newReleaseCardOne .comicImage {
  width: 230px;
  height: 357px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.newReleaseCardOne .comicImage:hover {
  transform: scale(1.03);
}
.newReleaseCardOne:hover .priceTagComicsPageWeb {
  transform: scale(1.04);
}
.newReleaseCardOne:hover .priceAmountComicsPageWeb {
  transform: scale(1.04);
}

.newReleaseNameAndStore {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.newReleaseNameAndStore .newReleaseName {
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}
.newReleaseNameAndStore .newReleaseStore {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.otherBooksWebCardOneWrapper {
  width: 262px;
  height: 457px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px;
}

.otherBooksCardOneWrapperMobile {
  width: 163px;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.otherBooksWebCardOne {
  position: relative;
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.otherBooksWebCardOne .comicImage {
  z-index: -1;
  width: 230px;
  height: 357px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.otherBooksWebCardOne .comicImage:hover {
  transform: scale(1.03);
  z-index: -1;
}
.otherBooksWebCardOne:hover .priceTagComicsPageWeb {
  transform: scale(1.04);
  z-index: 0;
}
.otherBooksWebCardOne:hover .priceAmountComicsPageWeb {
  transform: scale(1.04);
  z-index: 0;
}

.otherBooksNameAndStoreWeb {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.otherBooksNameAndStoreWeb .otherBooksWebName {
  margin-top: 15px;
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}

.otherBooksNameAndStoreMobileLoading {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3px;
}
.otherBooksNameAndStoreMobileLoading .otherBooksWebName {
  margin-top: 15px;
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}

.otherBooksWebStore {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.priceTagComicsPageWeb {
  position: absolute;
  top: 328px;
  left: 170px;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}

.priceAmountComicsPageWeb {
  position: absolute;
  top: 334px;
  left: 183px;
  font-size: 13px;
  z-index: 2;
  transition: transform 0.2s ease-in-out;
}

.priceTagComicsPageWebTwo {
  position: absolute;
  top: 315px;
  left: 158px;
  z-index: 0;
  transition: transform 0.2s ease-in-out;
}

.priceAmountComicsPageWebTwo {
  position: absolute;
  top: 321px;
  left: 170px;
  font-size: 13px;
  z-index: 0;
  transition: transform 0.2s ease-in-out;
}

.priceTagComicsPageMobile {
  position: absolute;
  top: 210px;
  left: 90px;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}

.priceAmountComicsPageMobile {
  position: absolute;
  top: 216px;
  left: 102px;
  font-size: 13px;
  z-index: 2;
  transition: transform 0.2s ease-in-out;
}

.priceTagComicsPageMobileTwo {
  position: absolute;
  top: 420px;
  left: 282px;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}

.priceAmountComicsPageMobileTwo {
  position: absolute;
  top: 426px;
  left: 290px;
  font-size: 13px;
  z-index: 2;
  transition: transform 0.2s ease-in-out;
}

.priceTagComicsPageMobileThree {
  position: absolute;
  top: 422px;
  left: 270px;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}

.priceAmountComicsPageMobileThree {
  position: absolute;
  top: 428px;
  left: 281px;
  font-size: 13px;
  z-index: 2;
  transition: transform 0.2s ease-in-out;
}

.comicsPageMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 100px;
}

.profileInfoMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 50px;
}

.AboutTheCreatorMobileWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.comicsPageListWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px;
}

.youMayAlsoLikeMobileCardWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 600px;
}

.youMayAlsoLikeMobileCardMobile {
  position: relative;
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
.youMayAlsoLikeMobileCardMobile .youMayAlsoLikeComicImageMobile {
  width: 361px;
  height: 470px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.youMayAlsoLikeMobileCardMobile .youMayAlsoLikeComicImageMobile:hover {
  transform: scale(1.03);
}
.youMayAlsoLikeMobileCardMobile:hover .priceTagMobile {
  transform: scale(1.04);
}
.youMayAlsoLikeMobileCardMobile:hover .priceAmountMobile {
  transform: scale(1.04);
}

.youMayAlsoLikeMobileNameAndStoreMobile {
  display: flex;
  width: 353px;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding-top: 20px;
}
.youMayAlsoLikeMobileNameAndStoreMobile .youMakeAlsoLikeNameMobile {
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}
.youMayAlsoLikeMobileNameAndStoreMobile .youMayAlsoLikeStoreMobile {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.newReleaseCardMobile {
  position: relative;
  width: 361px;
  height: 600px;
  border-radius: 8px;
  padding: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
.newReleaseCardMobile .comicImageMobile {
  width: 361px;
  height: 419px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.newReleaseCardMobile .comicImageMobile:hover {
  transform: scale(1.03);
}
.newReleaseCardMobile:hover .priceTagMobile {
  transform: scale(1.04);
}
.newReleaseCardMobile:hover .priceAmountMobile {
  transform: scale(1.04);
}

.newReleaseCardMobileTwo {
  position: relative;
  width: 361px;
  height: 505px;
  border-radius: 8px;
  padding: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
.newReleaseCardMobileTwo .comicImageMobile {
  width: 361px;
  height: 419px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.newReleaseCardMobileTwo .comicImageMobile:hover {
  transform: scale(1.03);
}
.newReleaseCardMobileTwo:hover .priceTagMobile {
  transform: scale(1.04);
}
.newReleaseCardMobileTwo:hover .priceAmountMobile {
  transform: scale(1.04);
}

.comicImageShimmerMobile {
  width: 361px;
  height: 419px;
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
  border: none;
}
.comicImageShimmerMobile:hover {
  transform: scale(1.03);
}

.newReleaseNameAndStore {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.newReleaseNameAndStore .newReleaseName {
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}
.newReleaseNameAndStore .newReleaseStore {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.newReleaseNameAndStoreMobileTwo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding-left: 15px;
}
.newReleaseNameAndStoreMobileTwo .newReleaseName {
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}
.newReleaseNameAndStoreMobileTwo .newReleaseStore {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.priceTagMobile {
  position: absolute;
  top: 419px;
  left: 270px;
  z-index: 1;
  transition: transform 0.2s ease-in-out;
}

.priceAmountMobile {
  position: absolute;
  top: 425px;
  left: 281px;
  font-size: 13px;
  z-index: 2;
  transition: transform 0.2s ease-in-out;
}

.bookDetailsParent {
  position: relative;
  width: 100%;
  height: 717px;
  margin-top: -100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) and (max-width: 1422px) {
  .bookDetailsParent {
    height: 690px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .bookDetailsParent {
    height: 720px;
  }
}

.darkOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.contentArea {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin-top: 50px;
  height: 617px;
  color: white;
  text-align: center;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.8fr 3.2fr;
}
@media (min-width: 1024px) and (max-width: 1422px) {
  .contentArea {
    height: 708px;
  }
}

.section1BookContentArea {
  position: relative;
}

.section2BookContentArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 45px;
  gap: 18px;
}
@media (min-width: 768px) and (max-width: 1422px) {
  .section2BookContentArea {
    margin-top: 70px;
    margin-left: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .section2BookContentArea {
    margin-top: 15px;
    margin-left: 0px;
  }
}

.bookIssueCover {
  position: absolute;
  top: 45px;
  left: 30px;
  width: 423px;
  height: 588px;
  border-radius: 8px;
  border: 1px solid #d2d2d2;
}
@media (min-width: 1024px) and (max-width: 1422px) {
  .bookIssueCover {
    width: 284px;
    height: 478px;
    top: 139px;
    left: 40px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .bookIssueCover {
    width: 220px;
    height: 370px;
    top: 159px;
  }
}

.bookIssueName {
  font-family: "JetBrainsMono-Bold";
  color: white;
  font-size: 28px;
}

.bookIssuePrice {
  font-family: "JetBrainsMono-Bold";
  color: white;
  font-size: 22px;
}

.bookInfoButtonsWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.viewPdfButton {
  color: #3d1a37;
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  background-color: white;
  border: 1px solid #d2d2d2;
  padding: 10px 27px;
}
.viewPdfButton:hover {
  background-color: #5d2f55;
  color: white;
}

.addToCartButton {
  color: #3d1a37;
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  background-color: white;
  border: 1px solid #d2d2d2;
  padding: 10px 27px;
}
.addToCartButton:hover {
  background-color: #5d2f55;
  color: white;
}

.trailerButton {
  color: #3d1a37;
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  background-color: white;
  border: 1px solid #d2d2d2;
  padding: 10px 27px;
}
.trailerButton:hover {
  background-color: #5d2f55;
  color: white;
}

.bookInfoDescription {
  color: white;
  font-size: 16px;
  font-family: "JetBrainsMono-Light";
  text-align: start;
  margin-right: 20px;
  max-height: 160px;
  overflow-y: auto;
}
@media (min-width: 768px) and (max-width: 1422px) {
  .bookInfoDescription {
    margin-right: 10px;
  }
}

.bookInfoDescriptionMobile {
  color: black;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 14px;
  font-family: "JetBrainsMono-Light";
  text-align: start;
  max-height: 230px;
  overflow-y: auto;
}
.bookInfoDescriptionMobile img {
  width: 362px;
  height: auto;
  border-radius: 8px;
  float: inline-start;
}

.ageRandAndTotalPages {
  color: white;
  font-size: 16px;
  font-family: "JetBrainsMono-Light";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.ageRangeTotalPagesWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.boldText {
  font-family: "JetBrainsMono-Bold";
  font-size: 18px;
}

.genresInfoWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-family: "JetBrainsMono-Light";
}

.genreInfoEl {
  border: 1px solid #b2a0a0;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
}

.collaborationsWrapper {
  max-width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid #b2a0a0;
  border-radius: 8px;
  padding: 14px;
  gap: 30px;
}

.collaborationElement {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 14px;
}

.collaborationNameAndSkills {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "JetBrainsMono-Light";
  font-size: 12px;
}

.collaborationImage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid white;
  margin: 5px;
}

.collaborationName {
  font-family: "JetBrainsMono-Bold";
  font-size: 12px;
}

.collaborationSkill {
  font-family: "JetBrainsMono-Regular";
  font-size: 10px;
}

.seriesDetailsAndSocialsSection {
  display: grid;
  grid-template-columns: 2fr 3fr;
  width: 100%;
}

.youMayAlsoLikeBooksWeb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 20px 0px;
  flex-wrap: wrap;
  gap: 20px;
}

.youMayAlsoLikeWebWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 50px 0px;
}

.youMayAlsoLikeWebBooksWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 230px;
  height: 457px;
}

.youMayAlsoLikeWebTagline {
  font-family: "JetBrainsMono-Regular";
  font-size: 16x;
  margin-left: 30px;
  margin-top: 20px;
  color: #6d6c6c;
}

.bookInfoDescriptionContainer {
  position: relative;
  max-height: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookInfoReadMoreButton {
  color: #ffffff;
  cursor: pointer;
  font-family: "JetBrainsMono-Bold";
}

.bookInfoModalBackdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bookInfoModalBackdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.bookInfoModalBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: "JetBrainsMono-Light";
  text-align: center;
  padding: 40px;
}

.bookInfoModalContent {
  width: 80%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
}
.bookInfoModalContent img {
  width: 314px;
  height: auto;
  border-radius: 8px;
  margin: 0 20px 20px 0;
  float: left;
}
.bookInfoModalContent p,
.bookInfoModalContent div {
  overflow: visible;
}

.bookInfoCloseButton {
  position: absolute;
  top: 20px;
  right: 30px;
  background: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.bookIssueNameLoading {
  width: 272px;
  height: 35px;
}

.bookIssuePriceLoading {
  width: 85px;
  height: 32px;
}

.bookDetailsButtonLoading {
  width: 135px;
  height: 45px;
}

.bookDetailsParagraphLoading {
  width: 95%;
  height: 50px;
}

.bookDetailsSmallDetailsLoading {
  width: 95%;
  height: 35px;
}

.bookIssueCoverMobileLoading {
  position: absolute;
  top: 65px;
  width: 362px;
  height: 529px;
  border-radius: 8px;
  border: 1px solid #d2d2d2;
}

.bookIssueNameMobileLoading {
  width: 280px;
  height: 28px;
}

.bookIssuePriceLoading {
  width: 100px;
  height: 24px;
}

.viewPdfDiv {
  width: 120px;
  height: 45px;
}

.addToCartDiv {
  width: 146px;
  height: 45px;
}

.issueDescriptionLoading {
  width: 100%;
  height: 260px;
}

.ageRangeAndPageMobileShimmer {
  width: 250px;
  height: 20px;
}

.genresMobileShimmer {
  width: 270px;
  height: 35px;
}

.collaborationNameShimmerMobile {
  width: 70px;
  height: 12px;
}

.bookDetailsNameLoading {
  width: 120px;
  height: 23px;
}

.bookDetailsStoreLoading {
  width: 120px;
  height: 12px;
}

.bookDetailsMobileParent {
  position: relative;
  width: 100%;
  height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.darkOverlayMobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.contentAreaMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 50px 10px;
}

.projectContentAreaMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 50px 15px;
  padding-bottom: 70px;
}

.bookIssueCoverMobile {
  position: absolute;
  top: 85px;
  width: 362px;
  height: 529px;
  border-radius: 8px;
  border: 1px solid #d2d2d2;
}

.bookIssueCoverMobileTwo {
  position: absolute;
  top: 85px;
  width: 362px;
  height: 529px;
  border-radius: 8px;
}

.bookIssueNameMobile {
  font-family: "JetBrainsMono-Bold";
  color: black;
  font-size: 28px;
}

.bookIssueNameMobileTwo {
  font-family: "JetBrainsMono-Bold";
  color: black;
  font-size: 28px;
  text-align: center;
  margin-top: 30px;
}

.bookIssuePriceMobile {
  font-family: "JetBrainsMono-Regular";
  color: black;
  font-size: 26px;
}

.bookDetailsMobile {
  width: 100%;
  gap: 15px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.bookIssueMobileDescription {
  font-family: "JetBrainsMono-Light";
  color: black;
  font-size: 16px;
  width: 100%;
}

.bookInfoButtonsWrapperMobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.ageRangeAndPageCountMobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-family: "JetBrainsMono-Light";
  margin-top: 20px;
}

.ageRangeMobile,
.pageCountMobile {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.ageMobile,
.pageMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 17px;
}

.genreTagsMobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: "JetBrainsMono-Light";
  margin-bottom: 20px;
}

.collaborationsWrapperMobile {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid #b2a0a0;
  border-radius: 8px;
  padding: 14px;
  gap: 10px;
  align-self: center;
  margin: 20px 10px;
}

.collaborationsWrapperMobileTwo {
  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid #b2a0a0;
  border-radius: 8px;
  padding: 14px;
  gap: 10px;
  align-self: center;
}

.collaborationNameMobile {
  font-family: "JetBrainsMono-Medium";
  font-size: 16px;
}

.videoWrapperMobile {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.videoWrapperMobile iframe {
  border-radius: 8px;
}

.otherPartInSeriesMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.seriesTitleMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  color: #5d2f55;
}

.seriesBooksWrapperMobile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
  align-items: center;
}

.otherBooksMobileCardOne {
  flex: 0 1 calc(50% - 12px);
  position: relative;
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.otherBooksMobileCardOne .comicImageMobile {
  width: 197px;
  aspect-ratio: 9/14;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.otherBooksMobileCardOne .comicImageMobile:hover {
  transform: scale(1.03);
}
.otherBooksMobileCardOne:hover .priceTagComicsPageWeb {
  transform: scale(1.04);
}
.otherBooksMobileCardOne:hover .priceAmountComicsPageWeb {
  transform: scale(1.04);
}

.youMayAlsoLikeMobileParent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.youMayAlsoTitleAndTaglineMobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 50px;
  gap: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 430px) and (max-width: 576px) {
  .youMayAlsoTitleAndTaglineMobile {
    padding-left: 10px;
  }
}

.youMayAlsoLikeMobileTagline {
  font-family: "JetBrainsMono-Regular";
  font-size: 16x;
  color: #6d6c6c;
}

.youMayAlsoLikeList {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}

.mobileModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
}

.mobileModalContentStyle {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modalContentStylesTwo {
  position: relative;
  width: 470px;
  height: 650px;
  left: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobileModalCloseButton {
  position: absolute;
  top: 5px;
  right: 20px;
  background: transparent;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 1009;
  font-family: "JetBrainsMono-light";
}

.pdfScreenTitle {
  font-family: "JetBrainsMono-light";
  color: white;
  font-size: 18px;
}

.pdfViewerContainerStyleMobile {
  flex: 1;
  overflow: auto;
  padding-top: 60px;
  padding-bottom: 40px;
}

.webModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 430px;
  height: 650px;
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  flex-direction: column;
  transition: opacity 0.3s ease;
  transform: scale(0.01);
  transition: all 0.2s ease-in-out;
}
.webModalOverlay.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.pdfViewerContainerStyleWeb {
  background-color: #1a1a1a;
  flex: 1;
  overflow: auto;
  padding-top: 55px;
  padding-bottom: 40px;
  z-index: 1008;
}

.expandButtonStyle {
  position: absolute;
  top: 10px;
  left: 38px;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1009;
  font-size: 11px;
  background-color: rgba(255, 255, 255, 0.1);
  font-family: "JetBrainsMono-Regular";
}
.expandButtonStyle:hover {
  background-color: white;
  color: #1a1a1a;
}

.exitFullscreenButton {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  font-family: "JetBrainsMono-Regular";
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1000001;
  font-size: 11px;
}
.exitFullscreenButton:hover {
  background-color: white;
  color: #1a1a1a;
}

.fullscreenPortal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullScreenTopDiv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 1000000;
}

.fullScreenPdfDiv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 75px 0 0 0;
  z-index: 1000000;
  background-color: #1a1a1a;
}

.noPreviewAvailablePara {
  color: white;
  text-align: center;
}

.socialsDetailsWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.navbar {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.navbarMobile {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-links {
  list-style-type: none;
  display: flex;
  gap: 30px;
  position: relative;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .nav-links {
    gap: 10px;
  }
}
@media (max-width: 768px) {
  .nav-links {
    gap: 17px;
  }
}

.underlineBar {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 2px;
  width: 165px;
  background-color: #cbd5e1;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .underlineBar {
    width: 115px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .underlineBar {
    width: 165px;
  }
}
@media (max-width: 576px) {
  .underlineBar {
    width: 155px;
  }
}

.nav-item {
  font-family: "JetBrainsMono-Medium";
  font-size: 16px;
  color: #836c7f;
  cursor: pointer;
  padding-bottom: 5px;
  position: relative;
  transition: color 0.3s;
}
.nav-item.active {
  color: #3d1a37;
}
.nav-item:hover {
  color: #3d1a37;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .nav-item {
    font-size: 12px;
  }
}

.highlight-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #5d2f55;
  transition: all 0.3s ease;
}

.updatesWebWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  margin: 40px 0px;
  gap: 30px;
}

.updatedWebPost {
  padding: 20px 10px;
  display: flex;
  gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 412px;
  border-radius: 16px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
@media (max-width: 576px) {
  .updatedWebPost {
    width: 363px;
  }
}

.updateWebPostTitle {
  font-family: "JetBrainsMono-Bold";
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.updatedWebPostStatus {
  font-family: "JetBrainsMono-Bold";
  font-size: 12px;
  color: #836c7f;
  cursor: pointer;
  padding-bottom: 5px;
  position: relative;
}

.updatedWebPostBody {
  font-family: "JetBrainsMono-light";
  font-size: 14px;
  color: black;
}
.updatedWebPostBody img {
  align-self: flex-start;
  width: 100%;
  border-radius: 16px;
  margin: 10px 0px;
}

.updatedWebPostMobile {
  padding: 20px 10px;
  display: flex;
  gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 320px;
  border-radius: 16px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.seriesDetailsWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
}

.videoWrapper {
  margin: 30px;
  overflow: hidden;
}
.videoWrapper iframe {
  border-radius: 8px;
}

.seriesTitle {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  color: #5d2f55;
  padding-left: 40px;
}

.seriesBooksWrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 20px;
}

.otherPartInTheSeriesAlternativeWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 20px;
  margin-top: 50px;
}

.seriesBooksWrapperAlternative {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.creatorsSectionWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 45px;
  padding-top: 50px;
  background-image: url("/background/creators-background.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.titleAndButtons {
  margin-left: 30px;
}
@media (max-width: 1422px) {
  .titleAndButtons {
    margin-left: 0px;
  }
}

.creatorsWrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.creatorImageNameAndTitle {
  width: 203px;
  height: 253px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.creatorImageNameAndTitle .creatorName {
  font-family: "JetBrainsMono-Bold";
  font-size: 14px;
  color: #5d2f55;
  margin-top: 10px;
}
.creatorImageNameAndTitle .creatorSkills {
  font-family: "JetBrainsMono-Medium";
  font-size: 10px;
  text-align: center;
  color: #836c7f;
}
@media (max-width: 576px) {
  .creatorImageNameAndTitle {
    width: 120px;
    height: 200px;
  }
}

.creatorImageWeb {
  width: 188px;
  height: 188px;
  border-radius: 50%;
  object-fit: cover;
  filter: brightness(0.9) saturate(0%);
  background-color: white;
}
@media (max-width: 576px) {
  .creatorImageWeb {
    width: 120px;
    height: 120px;
  }
}

.creatorsMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.creatorsList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.creatorImageMobileOne {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  filter: brightness(0.9) saturate(0%);
  background-color: white;
}
@media (max-width: 576px) {
  .creatorImageMobileOne {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    filter: brightness(0.9) saturate(0%);
    background-color: white;
  }
}

.forCreatorsWrapperWeb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  width: 100%;
  height: 780px;
  margin-top: 80px;
}
@media (max-width: 1422px) {
  .forCreatorsWrapperWeb {
    margin-top: 30px;
    height: 880px;
  }
}

.forCreatorsWrapperMobile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  width: 100%;
  height: 820px;
  margin-top: 80px;
}
@media (max-width: 1422px) {
  .forCreatorsWrapperMobile {
    margin-top: 30px;
    height: 820px;
  }
}

.titleButtonsFive {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 96vw;
}

.stackedCardsWrapperWeb {
  position: absolute;
  top: 180px;
}
@media (max-width: 1422px) {
  .stackedCardsWrapperWeb {
    top: 240px;
  }
}

.stackedCardsWrapperMobile {
  top: 280px;
}
@media (max-width: 1422px) {
  .stackedCardsWrapperMobile {
    top: 440px;
  }
}

.stackedCardsWrapperScreenMobile {
  top: 280px;
}
@media (max-width: 1422px) {
  .stackedCardsWrapperScreenMobile {
    top: 240px;
  }
}

.joinUsButtonMobile {
  position: relative;
  top: 275px;
}

.forCreatorsPageLayoutWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 40px;
  background-image: url("../../../background/creators-page-background.svg");
}
@media (max-width: 768px) {
  .forCreatorsPageLayoutWrapper {
    margin-top: 100px;
  }
}

.forCreatorsComponentText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}

.forCreatorsPageTitle {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 24px;
  margin: 0px 0 100px 0;
}
@media (max-width: 768px) {
  .forCreatorsPageTitle {
    margin: 0px 0 140px 0;
    font-size: 18px;
  }
}

.forCreatorsPageText {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.forCreatorsPageTextContent {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
}
.forCreatorsPageTextHeading {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 18px;
}

.forCreatorsPageTextParagraph {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 16px;
}

.forCreatorsPageList {
  list-style-type: disc;
  padding-left: 24px;
  margin: 10px 0;
  width: 100%;
}
.forCreatorsPageList li {
  margin-bottom: 12px;
  line-height: 1.5;
  display: list-item;
}

.airtableEmbedWrapper {
  width: 100%;
}

.airtableEmbed {
  background-color: transparent;
  border: 1px solid #ccc;
  width: 100%;
  height: 1208px;
}
@media (max-width: 768px) {
  .airtableEmbed {
    height: 1223px;
  }
}

.creatorsPageLayoutWrapperMobile {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: fit-content;
  gap: 32px;
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
}
@media (max-width: 480px) {
  .creatorsPageLayoutWrapperMobile .creatorsPageLayoutWrapperMobile {
    gap: 10px;
    width: 100%;
  }
}

.creatorsPageListWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px;
}

.creatorCardMobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 153px;
  position: relative;
}
.creatorCardMobile:hover .eyeWithBackgroundMobile {
  opacity: 1;
  z-index: 2;
}
@media (max-width: 480px) {
  .creatorCardMobile {
    width: 123px;
  }
}

.creatorImageMobile {
  width: 153px;
  height: 149px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d2d2d2;
  position: relative;
}
@media (max-width: 480px) {
  .creatorImageMobile {
    width: 123px;
    height: 119px;
  }
}

.creatorNameAndSkillsMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 188px;
  margin-top: 20px;
  position: relative;
}
@media (max-width: 480px) {
  .creatorNameAndSkillsMobile {
    width: 123px;
  }
}

.creatorNameMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 16px;
  color: #5d2f55;
  text-align: center;
}
@media (max-width: 480px) {
  .creatorNameMobile {
    font-size: 12px;
  }
}

.creatorSkillsMobile {
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
  font-size: 11px;
  text-align: center;
}
.creatorSkillsMobile:hover + .creatorSkillsBanner {
  visibility: visible;
  position: absolute;
  top: 60px;
  background-color: #f4e7ff;
  width: 153px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
  font-size: 11px;
  text-align: center;
}
@media (max-width: 480px) {
  .creatorSkillsMobile {
    font-size: 9px;
  }
}

.creatorSkillsBannerMobile {
  visibility: hidden;
  position: absolute;
  background-color: #f4e7ff;
  width: 153px;
  top: 60px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  z-index: 5;
}
@media (max-width: 480px) {
  .creatorSkillsBannerMobile {
    width: 123px;
  }
}

.eyeWithBackgroundMobile {
  width: 153px;
  height: 149px;
  border-radius: 50%;
  background-color: rgba(93, 47, 85, 0.7);
  position: absolute;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.imageContainer:hover .eyeWithBackgroundMobile {
  opacity: 1;
  z-index: 3;
}
@media (max-width: 480px) {
  .eyeWithBackgroundMobile {
    width: 123px;
    height: 119px;
    z-index: 3;
  }
}

.creatorsPageLayoutWrapperWeb {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  width: 100%;
  padding: 20px;
  background-image: url("/images/creators-page-background.svg");
}

.creatorsPageListWrapperWeb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  margin: 10px;
}

.creatorCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 188px;
  height: 300px;
  position: relative;
}
.creatorCard:hover .eyeWithBackground1 {
  opacity: 1;
}

.creatorImage {
  width: 188px;
  height: 188px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d2d2d2;
  position: relative;
  background-color: white;
}

.creatorNameAndSkills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 188px;
  margin-top: 20px;
  position: relative;
}

.creatorName {
  font-family: "JetBrainsMono-Bold";
  font-size: 16px;
  color: #5d2f55;
  text-align: center;
}

.creatorSkills {
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
  font-size: 12px;
  text-align: center;
}
.creatorSkills:hover + .creatorSkillsBanner {
  visibility: visible;
  position: absolute;
  top: 60px;
  background-color: #f4e7ff;
  width: 188px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.creatorSkillsBanner {
  visibility: hidden;
  position: absolute;
  background-color: #f4e7ff;
  width: 188px;
  top: 60px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  z-index: 5;
}

.eyeWithBackground1 {
  width: 188px;
  height: 188px;
  border-radius: 50%;
  background-color: rgba(93, 47, 85, 0.7);
  position: absolute;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.imageContainer:hover .eyeWithBackground1 {
  opacity: 1;
}

.cardContainerMobile {
  top: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 509px;
  width: 563px;
  position: relative;
  border-radius: 20px;
}
@media (max-width: 576px) {
  .cardContainerMobile {
    width: 363px;
  }
}

.cardContainerMobileScreen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 670px;
  width: 563px;
  position: relative;
  border-radius: 20px;
}
@media (max-width: 576px) {
  .cardContainerMobileScreen {
    width: 363px;
  }
}

.cardContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 650px;
  width: 1392px;
  position: relative;
  border-radius: 20px;
}
@media (max-width: 576px) {
  .cardContainer {
    height: 2100px;
    width: 363px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .cardContainer {
    height: 650px;
    width: 563px;
  }
}

.card {
  width: 100%;
  height: 165px;
  background-color: white;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: 1px solid #3d1a37;
  position: absolute;
  left: 0;
  color: #3d1a37;
}
@media (max-width: 576px) {
  .card {
    height: 509px;
    width: 363px;
    justify-content: flex-start;
    align-items: center;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .card {
    height: 200px;
    width: 563px;
    justify-content: flex-start;
    align-items: center;
  }
}

.card.expanded {
  height: 230px;
  background-color: #e1beff;
  transform: translateY(-60px);
}
@media (max-width: 1422px) {
  .card.expanded {
    height: 350px;
    transform: translateY(-85px);
  }
}
@media (max-width: 576px) {
  .card.expanded {
    height: 350px;
    transform: translateY(-85px);
  }
}

.card.collapsed {
  height: 168px;
}
@media (max-width: 1422px) {
  .card.collapsed {
    height: 180px;
  }
  .card.collapsed .cardImage {
    display: none;
  }
}
@media (max-width: 576px) {
  .card.collapsed {
    height: 180px;
  }
  .card.collapsed .cardImage {
    display: none;
  }
}

.card:nth-child(1) {
  top: 0;
}
.card:nth-child(2) {
  top: 134px;
}
@media (max-width: 1422px) {
  .card:nth-child(2) {
    top: 144px;
  }
}
@media (max-width: 576px) {
  .card:nth-child(2) {
    top: 144px;
  }
}

.card:nth-child(3) {
  top: 268px;
}
@media (max-width: 1422px) {
  .card:nth-child(3) {
    top: 288px;
  }
}
@media (max-width: 576px) {
  .card:nth-child(3) {
    top: 288px;
  }
}

.card:nth-child(4) {
  top: 402px;
}
@media (max-width: 1422px) {
  .card:nth-child(4) {
    top: 432px;
  }
}
@media (max-width: 576px) {
  .card:nth-child(4) {
    top: 432px;
  }
}

@media (max-width: 1422px) {
  .card:nth-child(3).expanded {
    height: 220px;
    transform: translateY(-40px);
  }
}
@media (max-width: 576px) {
  .card:nth-child(3).expanded {
    height: 220px;
    transform: translateY(-40px);
  }
}

.card:nth-child(4).expanded {
  height: 200px;
  transform: translateY(-35px);
}
@media (max-width: 1422px) {
  .card:nth-child(4).expanded {
    height: 250px;
    transform: translateY(-50px);
  }
}
@media (max-width: 576px) {
  .card:nth-child(4).expanded {
    height: 250px;
    transform: translateY(-50px);
  }
}

.cardContent {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 380px;
}
@media (max-width: 1422px) {
  .cardContent {
    max-width: 90%;
    gap: 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}
@media (max-width: 576px) {
  .cardContent {
    max-width: 90%;
    gap: 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}

.cardHeadingAndTagline {
  display: flex;
  flex-direction: column;
  max-width: 730px;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (max-width: 1422px) {
  .cardHeadingAndTagline {
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 576px) {
  .cardHeadingAndTagline {
    justify-content: center;
    align-items: center;
  }
}

.cardHeading {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  text-align: left;
}
@media (max-width: 1422px) {
  .cardHeading {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .cardHeading {
    font-size: 18px;
  }
}

.cardTagline {
  align-items: flex-start;
  font-family: "JetBrainsMono-Regular";
  font-size: 12px;
  text-align: left;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
@media (max-width: 576px) {
  .cardTagline {
    font-size: 10px;
    word-spacing: -1.5px;
  }
}

.card.expanded .cardTagline {
  opacity: 1;
}

.cardImage {
  width: 210px;
  height: 126px;
  border-radius: 20px;
  border: 1px solid #5d2f55;
  background-color: white;
  flex-shrink: 0;
}
.cardImage img {
  width: 200px;
  height: 116px;
}
@media (max-width: 576px) {
  .cardImage {
    width: 185px;
    height: 90px;
    margin-top: 10px;
  }
  .cardImage img {
    width: 170px;
    height: 70px;
  }
}

.exploreByGenresBackground {
  width: 100%;
  height: 497px;
  background-color: #f5ebff;
  background-image: linear-gradient(0deg, rgba(181, 117, 204, 0.1098039216) 1px, transparent 1px), linear-gradient(90deg, rgba(181, 117, 204, 0.1098039216) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.titlesAndButtonsWrapperThree {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 96vw;
  margin-top: 48px;
}

.genreListWeb {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  overflow: auto;
  width: 100%;
  position: absolute;
  top: 180px;
  padding-right: 30px;
  padding-left: 30px;
  scrollbar-width: none;
}

.genreCard {
  border: 1px solid rgba(249, 242, 255, 0.6509803922);
  background-color: rgba(249, 242, 255, 0.6509803922);
  position: relative;
  border-radius: 16px;
}
.genreCard .genreName {
  position: absolute;
  top: 16px;
  left: 16px;
  color: white;
  font-family: "JetBrainsMono-Bold";
  font-size: 20px;
}
.genreCard .genreImage {
  min-width: 248px;
  min-height: 248px;
}

.genresWebListParentWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.genreListForGenresScreen {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px 0;
  gap: 40px;
}
@media (max-width: 768px) {
  .genreListForGenresScreen {
    padding: 40px 10px;
  }
}

.genreCardForGenresScreen {
  border: 1px solid rgba(249, 242, 255, 0.6509803922);
  border-radius: 16px;
  position: relative;
}
.genreCardForGenresScreen .genreNameForGenresScreen {
  position: absolute;
  top: 32px;
  left: 32px;
  color: white;
  font-family: "JetBrainsMono-Bold";
  font-size: 2rem;
}
@media (max-width: 768px) {
  .genreCardForGenresScreen .genreNameForGenresScreen {
    top: 16px;
    left: 16px;
    font-size: 1rem;
  }
}
.genreCardForGenresScreen .genreImageForGenresScreen {
  width: 288px;
  height: 288px;
}
@media (max-width: 768px) {
  .genreCardForGenresScreen .genreImageForGenresScreen {
    width: 144px;
    height: 144px;
  }
}

.exploreByGenresMobileBackground {
  width: 100%;
  background-color: #f5ebff;
  background-image: linear-gradient(0deg, rgba(181, 117, 204, 0.1098039216) 1px, transparent 1px), linear-gradient(90deg, rgba(181, 117, 204, 0.1098039216) 1px, transparent 1px);
  background-size: 40px 40px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
}

.genreListMobile {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.genreCardMobile {
  border: 1px solid rgba(249, 242, 255, 0.6509803922);
  background-color: rgba(249, 242, 255, 0.6509803922);
  border-radius: 16px;
  position: relative;
}
.genreCardMobile .genreNameMobile {
  position: absolute;
  top: 16px;
  left: 16px;
  color: white;
  font-family: "JetBrainsMono-Bold";
  font-size: 16px;
}
.genreCardMobile .genreImageMobile {
  width: 170px;
  height: 170px;
}

.featuredOnWrapper {
  background-color: white;
  height: 501px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.titleFeaturedOnSection {
  margin-top: 48px;
  width: 96vw;
  color: #5d2f55;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}

.marquee {
  width: 100%;
  overflow: hidden;
  margin-top: 36px;
  height: 252px;
  position: relative;
}

.marqueeContent {
  display: flex;
  align-items: center;
  gap: 30px;
  animation: scroll 190s linear infinite;
  width: max-content;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.marqueeContent:hover {
  animation-play-state: paused;
}

.imageAndTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .imageAndTitle {
    width: 173px;
    height: 218px;
  }
}

.image {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
}
@media (max-width: 576px) {
  .image {
    width: 173px;
    height: 168px;
  }
}

.name {
  color: #5d2f55;
  font-size: 18px;
  font-family: "JetBrainsMono-Bold";
  margin-top: 8px;
}
@media (max-width: 576px) {
  .name {
    font-size: 14px;
  }
}

.featuredOnMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.featuresMobileGroup {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.filtersContainer {
  border: 1px solid #e1beff;
  width: 255px;
  height: fit-content;
  border-radius: 8px;
  margin-top: 25px;
  gap: 16px;
  background-color: #fdfbff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "JetBrainsMono-Bold";
  color: black;
  padding: 16px;
}

.skillsFilterTitle {
  font-size: 16px;
}

.rangeAndButton {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 16px;
}

.range {
  font-family: "JetBrainsMono-Regular";
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
}

.sliderWrapper {
  width: 100%;
  margin-bottom: 16px;
}

.applyButtonFilter {
  width: 66px;
  height: 26px;
  background-color: white;
  border: 1px solid #d2d2d2;
  font-family: "JetBrainsMono-Regular";
}
.applyButtonFilter:hover {
  border: 1px solid #5d2f55;
}

.dividerLine {
  width: 223px;
  border: 0.5px solid #f4e7ff;
  height: 1px;
}

.arrowAndTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.genresList {
  font-family: "JetBrainsMono-Regular";
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  gap: 16px;
}

.genreCheckbox {
  margin-right: 5px;
  border: 1px solid #d5d7da;
}

.dropdown {
  padding: 8px 12px;
  border: 1px solid #e1beff;
}
.dropdown select {
  padding-right: 20px;
}

.hamburgerButton {
  background: none;
  border: none;
  cursor: pointer;
}

.menuOverlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #353535;
  color: white;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
  overflow: scroll;
}
.menuOverlay:not(.hidden) {
  display: flex;
}

.cancelButton {
  background: none;
  border: none;
  color: black;
  background-color: white;
  font-weight: 200;
  font-size: 30px;
  cursor: pointer;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.cancelButton:hover {
  background-color: #e1beff;
}

.menuContent {
  margin-top: 20px;
  width: 100%;
}

.menuContent a {
  display: block;
  text-decoration: none;
  color: white;
  font-family: "JetBrainsMono-Regular";
  font-size: 16px;
  padding: 20px 0;
}
.menuContent a:hover {
  color: #e1beff;
}

.divider {
  height: 1px;
  background-color: white;
  width: 95%;
}

.userNameAndIconMobileMenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.userNameMobileMenu {
  color: #e1beff;
  font-family: "JetBrainsMono-Regular";
  font-size: 16px;
}

.sortingBarMobile {
  width: 100%;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: sticky;
  top: 64px;
  z-index: 4;
  background-color: white;
  gap: 15px;
}
@media (max-width: 429px) {
  .sortingBarMobile {
    padding: 30px 14px;
  }
}
@media (max-width: 480px) {
  .sortingBarMobile {
    padding: 30px 10px;
  }
}

.sortingBarMobileTitle {
  color: #1b1b1b;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
.hamburgerButtonMobile img {
  fill: #1b1b1b;
  color: #1b1b1b;
}

.filtersTitlesAndMenuButton {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.filtersTitle {
  font-family: "JetBrainsMono-Bold";
  font-size: 16px;
}

.hamburgerButtonMobile {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.dropdownMenu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  width: 100%;
  height: 26px;
  gap: 20px;
}

.dropdownMenuTwo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  vertical-align: middle;
  width: 100%;
  height: 26px;
  gap: 20px;
}

.dropdownMenuThree {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  width: 100%;
  height: 26px;
  gap: 6px;
}

.dropdownMenuTitle {
  color: #1b1b1b;
  font-family: "JetBrainsMono-Bold";
  font-size: 14px;
  padding-top: 12px;
  align-self: center;
}
@media (max-width: 320px) {
  .dropdownMenuTitle {
    font-size: 12px;
  }
}

.dropdownMenuTitleMobile {
  color: #1b1b1b;
  font-family: "JetBrainsMono-Bold";
  font-size: 14px;
  align-self: center;
}
@media (max-width: 320px) {
  .dropdownMenuTitleMobile {
    font-size: 8px;
  }
}

.priceSortingOptionMobile {
  width: 140px;
  border: 1px solid #e1beff;
  background-color: white;
  font-family: "JetBrainsMono-Regular";
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 999;
  margin-top: 258px;
  text-align: center;
}
@media (min-width: 430px) and (max-width: 768px) {
  .priceSortingOptionMobile {
    margin-left: 525px;
    -webkit-margin-start: 403px;
    -webkit-margin-before: 130px;
  }
}
@media (min-width: 430px) and (max-width: 430px) {
  .priceSortingOptionMobile {
    margin-left: 270px;
  }
}
@media (max-width: 429px) {
  .priceSortingOptionMobile {
    margin-left: 230px;
  }
}

.selectWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
}

.selectTitle {
  color: #1b1b1b;
  font-family: "JetBrainsMono-Bold";
  font-size: 20px;
}

.selectMobile {
  min-width: 140px;
  border: 1px solid #d5d7da;
  padding: 6px 30px 6px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #3d1a37;
  font-family: "JetBrainsMono-Regular";
  transition: background-color 0.2s ease;
  position: relative;
}

.select2 {
  min-width: 90px;
  border: 1px solid #d5d7da;
  padding: 6px 30px 6px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #3d1a37;
  font-family: "JetBrainsMono-Regular";
  transition: background-color 0.2s ease;
  position: relative;
}

.arrowIcon {
  position: absolute;
  top: 5px;
  right: 8px;
}

.select:hover {
  border: 1px solid #e1beff;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  margin: 0 5px;
  transition: transform 0.2s ease;
}

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  animation: slideIn 0.1s ease-out forwards;
  overflow-y: auto;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.modalContent {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

.closeButton {
  position: absolute;
  top: 80px;
  left: calc(100% - 40px);
  transform: translateX(-50%);
  cursor: pointer;
  color: #3d1a37;
  font-size: 30px;
}

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

.hamburgerButtonMobile {
  cursor: pointer;
}

.filtersTitle {
  font-size: 16px;
  font-weight: bold;
}

.priceSortingOptionMobile2 {
  width: 90px;
  border: 1px solid #e1beff;
  background-color: white;
  font-family: "JetBrainsMono-Regular";
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 999;
  margin-top: 258px;
  text-align: center;
}
@media (min-width: 430px) and (max-width: 768px) {
  .priceSortingOptionMobile2 {
    margin-left: 525px;
    -webkit-margin-start: 403px;
    -webkit-margin-before: 130px;
  }
}
@media (min-width: 430px) and (max-width: 430px) {
  .priceSortingOptionMobile2 {
    margin-left: 270px;
  }
}
@media (max-width: 429px) {
  .priceSortingOptionMobile2 {
    margin-left: 230px;
  }
}

.sortingBar {
  top: 100px;
  height: 72px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: sticky;
  z-index: 10;
  background-color: white;
  padding: 0 40px;
}
@media (min-width: 768px) and (max-width: 1422px) {
  .sortingBar {
    top: 130px;
  }
}

.sortingBarTitle {
  color: black;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}

.selectWrapperWeb {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
}

.selectTitle {
  color: black;
  font-family: "JetBrainsMono-Bold";
  font-size: 20px;
}

.select {
  min-width: 140px;
  border: 1px solid #d5d7da;
  padding: 6px 30px 6px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #3d1a37;
  font-family: "JetBrainsMono-Regular";
  transition: background-color 0.2s ease;
  position: relative;
}

.arrowIcon {
  position: absolute;
  top: 5px;
  right: 10px;
}

.select:hover {
  border: 1px solid #e1beff;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  margin: 0 5px;
  transition: transform 0.2s ease;
}

.latestFeedsWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 95%;
}

.latestFromComixWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 740px;
  background-image: url("/background/latest-from-comix.svg");
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.titleButtons {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 96vw;
  margin-top: 130px;
}

.latestFromComixList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: auto;
  scrollbar-width: none;
  width: 100%;
  height: 420px;
  position: absolute;
  padding-left: 30px;
  padding-right: 30px;
  top: 230px;
  gap: 30px;
}

.latestFromComixCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 412px;
  height: 383px;
  border-radius: 16px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
@media (max-width: 576px) {
  .latestFromComixCard {
    width: 363px;
  }
}

.latestFromComixIconAndArticleType {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.latestFromComixIconAndArticleType .articleTypeIcon {
  width: 18px;
  height: 18px;
  align-self: center;
}
.latestFromComixIconAndArticleType .articleTypeTitle {
  font-size: 18px;
  font-family: "Raleway Medium";
  color: #836c7f;
}

.latestFromComixCardImage {
  align-self: flex-start;
  width: 412px;
  height: 383px;
  object-fit: cover;
  object-position: top;
  border-radius: 16px;
}
@media (max-width: 576px) {
  .latestFromComixCardImage {
    width: 363px;
  }
}

.latestFromComixCardInfo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  background-color: white;
  padding: 20px;
  top: 45%;
  width: 100%;
  height: 55%;
  overflow: auto;
  scrollbar-width: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.latestFromComixCardInfo .latestArticleTitle {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  color: #1b1b1b;
}
.latestFromComixCardInfo .latestArticleSummary {
  font-family: "Raleway Light";
  font-size: 16px;
}
.latestFromComixCardInfo button {
  font-family: "Raleway Semi-Bold";
  color: #1b1b1b;
}

.readMoreButtonWeb {
  font: bold;
}

.postsListWebWrapper {
  margin-top: 50px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.postsListMobileWrapper {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}

.articleTypeTitleLoading {
  width: 60px;
  height: 18px;
}

.latestArticleTitleLoading {
  width: 335px;
  height: 25px;
}

.latestArticleSummaryLoading {
  width: 360px;
  height: 20px;
}

.latestArticleSummaryLoadingMobile {
  width: 320px;
  height: 20px;
}

.latestFromComixCardInfoLoading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  background-color: white;
  padding: 20px;
  top: 45%;
  width: 100%;
  height: 55%;
  overflow: auto;
  scrollbar-width: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  gap: 5px;
}

.latestComixMobileWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-image: url("/background/latest-from-comix.svg");
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  margin-top: 80px;
  padding-top: 130px;
  padding-bottom: 140px;
}

.cardGroupMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.newReleasesWrapperOne {
  position: relative;
  width: 100%;
  height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: url("/background/new-releases-background.svg");
  overflow: hidden;
}
@media (min-width: 1920px) {
  .newReleasesWrapperOne {
    height: 920px;
  }
}

.newReleasesBackgroundOne {
  width: 100%;
  height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: rgba(249, 242, 255, 0.6509803922);
}

.titlesAndButtonsWrapperOne {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 96vw;
}

.edgeOne {
  width: 100%;
  opacity: 65%;
  box-sizing: border-box;
}

.edgeOneMobile {
  min-width: 101vw;
  opacity: 65%;
  box-sizing: border-box;
}

.newReleasesListWrapperOne {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  overflow: auto;
  width: 100%;
  height: auto;
  position: absolute;
  top: 210px;
  padding-left: 30px;
  padding-right: 30px;
  scrollbar-width: none;
}
@media (min-width: 1920px) {
  .newReleasesListWrapperOne {
    top: 280px;
  }
}

.newReleaseCardTwo {
  position: relative;
  width: 262px;
  height: 471px;
  border-radius: 8px;
  border: 1.02px solid #d2d2d2;
  padding: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.newReleaseCardTwo .comicImage {
  width: 230px;
  height: 357px;
  border-radius: 8px;
  border: 1.02px solid #eeeeee;
}
.newReleaseCardTwo:hover {
  border: 1.02px solid black;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.newReleaseNameAndStore {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.newReleaseNameAndStore .newReleaseName {
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 22.72px;
  color: #5d2f55;
}
.newReleaseNameAndStore .newReleaseStore {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.priceTag {
  position: absolute;
  top: 408px;
  left: 170px;
  z-index: 1;
}

.priceAmount {
  position: absolute;
  top: 414px;
  font-size: 13px;
  left: 182px;
  z-index: 2;
}

.newReleasesMobileWrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-image: url("/background/new-releases-background.svg");
  background-repeat: repeat-y;
  background-size: auto;
}
@media (max-width: 480px) {
  .newReleasesMobileWrapper {
    margin-top: 84px;
  }
}

.newReleasesMobileBackground {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: rgba(249, 242, 255, 0.6509803922);
  background-repeat: repeat-y;
  background-size: auto;
  padding-bottom: 32px;
}

.titleMobile {
  align-self: flex-start;
  color: #5d2f55;
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  margin-left: 32px;
}

.taglineMobile {
  width: 365px;
  align-self: flex-start;
}
.taglineMobile p {
  font-family: "JetBrainsMono-Medium";
  font-size: 18x;
  align-self: flex-start;
  margin-top: 15px;
  color: rgb(109, 108, 108);
  margin-left: 30px;
}

.cardGroup {
  margin-top: 25px;
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.newReleaseMobileCard {
  position: relative;
  width: 330px;
  height: 460px;
  border-radius: 8px;
  padding: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1.02px solid #d2d2d2;
}
.newReleaseMobileCard .comicMobileImage {
  width: 331px;
  height: 360px;
  border-radius: 8px;
  border: 1.02px solid #eeeeee;
}
.newReleaseMobileCard:hover {
  border: 1.02px solid black;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.newReleaseNameAndStoreMobile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: flex-start;
  gap: 8px;
}
.newReleaseNameAndStoreMobile .newReleaseNameMobile {
  font-size: 16px;
  font-family: "JetBrainsMono-Bold";
  line-height: 18px;
  color: #5d2f55;
}
.newReleaseNameAndStoreMobile .newReleaseStoreMobile {
  color: #836c7f;
  font-size: 14px;
  font-family: "JetBrainsMono-Medium";
  line-height: 19.88px;
}

.priceTagMobileOne {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 1;
}

.priceAmountMobileOne {
  position: absolute;
  bottom: 37px;
  right: 50px;
  font-size: 14px;
  z-index: 2;
}

.storeFrontWebWrapper {
  width: 100%;
  height: 302px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: -100px;
}

.storeFrontWebImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: white;
}

.storeFrontWebImageBlank {
  width: 100%;
  height: 302px;
  object-fit: cover;
  background-color: white;
}

.navigationBarWeb {
  position: relative;
  background-color: rgba(27, 27, 27, 0.5019607843);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 56px;
  color: white;
  position: sticky;
  top: 100px;
  z-index: 9;
  padding: 0 20px;
}
@media (min-width: 768px) and (max-width: 1422px) {
  .navigationBarWeb {
    top: 130px;
  }
}
@media (max-width: 768px) {
  .navigationBarWeb {
    top: 64px;
  }
}

.buttonText {
  font-family: "JetBrainsMono-Bold";
  margin-left: 20px;
}

.buttonAndButtonText {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.share-links-container {
  position: absolute;
  top: 40px;
  right: 0;
  display: flex;
  gap: 10px;
  margin-top: 10px;
  z-index: 20000;
  border-radius: 8px;
  padding: 20px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.share-links-container.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.storesPageInfoSectionWrapperWeb {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  padding: 180px 0px 40px 40px;
  position: relative;
}

.storesPageAboutUsWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}

.storesPageAboutUsTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
}

.storesPageAboutUsDescription {
  font-family: "JetBrainsMono-Regular";
  width: 344px;
  height: auto;
  background-color: #fdfbff;
  border: 1px solid #f4e7ff;
  border-radius: 8px;
  padding: 18px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.storesPageAboutUsDescriptionLoading {
  width: 350px;
  height: 500px;
  border-radius: 8px;
}

.socialFeedAndOurWorkWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 50px;
}

.socialFeedTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 18px;
}

.ourWorkSectionWrapper {
  gap: 24px;
  width: 100%;
}

.ourWorkTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
  padding-left: 15px;
}

.ourWorkListWrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}

.storeFrontCard {
  position: relative;
  width: 262px;
  height: 471px;
  border-radius: 8px;
  padding: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.storeFrontCard .comicImage {
  width: 230px;
  height: 357px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: transform 0.2s ease-in-out;
}
.storeFrontCard .comicImage:hover {
  transform: scale(1.03);
}
.storeFrontCard:hover .priceTag {
  transform: scale(1.04);
}
.storeFrontCard:hover .priceAmount {
  transform: scale(1.04);
}

.storePageStoreInfoCardWrapperWeb {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -110px;
}

.storesPageStoreInfoCardWeb {
  padding: 20px;
  width: 567px;
  border-radius: 16px;
  border: 1px solid #e1beff;
  background-color: #fdfbff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.storesPageStoreImageWeb {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  border: 1px solid #e1beff;
}

.storesPageStoreInfoWeb {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.storesPageStoreInfoWebTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
}

.storesPageStoreImageLoadingWeb {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  border: 1px solid #e1beff;
}

.storePageInfoTitleLoading {
  width: 230px;
  height: 25px;
}

.storeInfoFollowersAndBooksInfoWeb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.creatorProfileWebAboutUsDescription {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  font-family: "JetBrainsMono-Regular";
  width: 344px;
  height: auto;
  background-color: #fdfbff;
  border: 1px solid #f4e7ff;
  border-radius: 8px;
  padding: 18px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.creatorProfileMobileAboutUsDescriptionLoading {
  width: 345px;
  height: 518px;
  border-radius: 8px;
}

.aboutCreatorWebInfo {
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
}

.aboutCreatorWebInfoFields {
  font-family: "JetBrainsMono-Bold";
  color: #3d1a37;
  font-size: 16px;
}

.socialIconCreatorsSection {
  width: 21px;
  height: 21px;
}

.socialsRowCreatorsSection {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.socialsRowCreatorsSection .blackSocialIcon {
  filter: brightness(0) saturate(100%) invert(20%) sepia(20%) saturate(2000%) hue-rotate(300deg) brightness(20%) contrast(90%);
}

.participatedComicsTitleWeb {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
  padding-left: 15px;
}

.storesWrapperOne {
  position: relative;
  padding-top: 80px;
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/background/stores-background.svg");
}

.titleButtonsFour {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 96vw;
}

.storesListOne {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: auto;
  height: auto;
  width: 100%;
  gap: 16px;
  position: absolute;
  padding-left: 30px;
  padding-right: 30px;
  top: 210px;
  scrollbar-width: none;
}

.storeCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 313px;
  height: 400px;
  gap: 16px;
}
@media (max-width: 576px) {
  .storeCard {
    width: 174px;
    height: 218px;
  }
}
.storeCard .storeImageHomePage {
  object-fit: contain;
  width: 313px;
  height: 313px;
  background-color: white;
  border-radius: 16px;
  border: 1px solid #d2d2d2;
}
@media (max-width: 576px) {
  .storeCard .storeImageHomePage {
    width: 174px;
    height: 159px;
  }
}
.storeCard .storeTitle {
  color: #5d2f55;
  font-size: 18px;
  font-family: "JetBrainsMono-Bold";
  align-self: flex-start;
}
@media (max-width: 576px) {
  .storeCard .storeTitle {
    font-size: 15px;
    align-self: center;
  }
}

.storeTitleShimmerLoader {
  width: 150px;
  height: 16px;
}

.storesWrapperMobile {
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("/background/stores-background-mobile.svg");
  background-size: cover;
  background-position: center;
}

.storesListTwo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.storesMobileWrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  background-image: url("/background/our-creators-mobile-background.svg");
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  margin-bottom: 120px;
  gap: 20px;
}
@media (max-width: 768px) {
  .storesMobileWrapper {
    padding: none;
  }
}

.storesList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.storesPageLayoutWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
  padding: 40px;
  background-image: url("/background/creators-page-background.svg");
}

.storeImageAndName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.imageContainer {
  position: relative;
  width: 240px;
  height: 240px;
}
@media (max-width: 768px) {
  .imageContainer {
    width: 175px;
    height: 175px;
  }
}

.storeImage {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: contain;
  border: 1px solid #d2d2d2;
  background-color: white;
}
@media (max-width: 768px) {
  .storeImage {
    width: 175px;
    height: 175px;
  }
}

.eyeWithBackground {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(93, 47, 85, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.imageContainer:hover .eyeWithBackground {
  opacity: 1;
}

.storeName {
  font-family: "JetBrainsMono-Bold";
  font-size: 16px;
  color: #5d2f55;
}
@media (max-width: 768px) {
  .storeName {
    font-size: 12px;
  }
}

.storeFrontMobileWrapper {
  width: 100%;
  height: 202px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.storeFrontMobileImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: white;
}

.infoSectionMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 140px 0 0 0;
}

.storeFrontMobileImageBlank {
  width: 100%;
  height: 202px;
  object-fit: cover;
  background-color: white;
}

.storeInfoMobileCardWrapper {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 150px;
}

.storeInfoMobileCard {
  gap: 8px;
  padding: 15px;
  width: 363px;
  border-radius: 16px;
  border: 1px solid #e1beff;
  background-color: #fdfbff;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.storeInfoTitleMobileLoading {
  width: 175px;
  height: 23px;
}

.comicMobileNameLoading {
  width: 125px;
  height: 20px;
}

.comicMobileStoreLoading {
  width: 120px;
  height: 18px;
}

.storeImageMobile {
  width: 103px;
  height: 103px;
  border-radius: 50%;
}

.storeInfoMobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  background-color: #fdfbff;
}

.followButtonSocialProfiles {
  border: 1px solid #d2d2d2;
  color: #5d2f55;
  font-family: "JetBrainsMono-Bold";
  padding: 10px 16px;
  background-color: white;
}

.storeInfoFollowersAndBooksInfoMobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.storeInfoFollowers {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.storeInfoFollowersLoading,
.storeInfoComicCountLoading {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3px;
}

.storeInfoFollowersTitle {
  font-size: 12px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
}

.storeInfoFollowersValue {
  font-size: 24px;
  font-family: "JetBrainsMono-Bold";
  color: black;
}

.storeInfoComicCount {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.storeInfoComicCountTitle {
  font-size: 12px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
}

.storeInfoComicCountValue {
  font-size: 24px;
  font-family: "JetBrainsMono-Bold";
  color: black;
}

.storeInfoTitleMobile {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 15px;
}

.socialFeedAndOurWorkMobileWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ourWorkSectionMobileWrapper {
  margin-top: 44px;
  width: 361px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.ourWorkMobileTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
  align-self: flex-start;
}

.participatedComicsMobileTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
  padding-left: 16px;
}

.titleAndListMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.ourWorkListMobileWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.storesPageAboutUsMobileWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  width: 361px;
}

.storesPageAboutUsMobileTitle {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 24px;
}

.storesPageAboutUsMobileDescription {
  font-family: "JetBrainsMono-Regular";
  width: 363px;
  height: auto;
  background-color: #fdfbff;
  border: 1px solid #f4e7ff;
  border-radius: 8px;
  padding: 18px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.storeInfoFollowersTitleLoading,
.storeInfoComicCountTitleLoading {
  width: 68px;
  height: 18px;
}

.storeInfoFollowersValueLoading,
.storeInfoComicCountValueLoading {
  width: 26px;
  height: 30px;
}

.followButtonSocialProfilesLoading {
  width: 91px;
  height: 46px;
}

.top10ComicsWrapperWeb {
  padding-top: 80px;
  position: relative;
  width: 100%;
  height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: url("/background/top-10-comics-background.svg");
  overflow: hidden;
}

.titlesAndButtonsWrapperTwo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 96vw;
}

.cardParentWeb {
  position: relative;
}

.top10RankNumberWeb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  background-color: rgba(76, 35, 69, 0.8);
  position: absolute;
  top: 97px;
  left: 17px;
  z-index: 4;
  border: 1px solid white;
  border-radius: 8px 0 8px 0;
}
.top10RankNumberWeb .number {
  color: white;
  font-family: "JetBrainsMono-Bold";
  font-size: 56px;
}

.top10ComicsListWrapperWeb {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  overflow: auto;
  width: 100%;
  height: auto;
  position: absolute;
  top: 210px;
  padding-left: 30px;
  padding-right: 30px;
  scrollbar-width: none;
}

.top10ComicsMobileWrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: url("/background/top-10-comics-background.svg");
  background-repeat: repeat-y;
  background-size: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.cardParentMobile {
  position: relative;
}

.cardGroupMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.top10RankNumberMobile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  background-color: rgba(76, 35, 69, 0.8);
  position: absolute;
  top: 79px;
  left: 22px;
  z-index: 4;
  border: 1px solid white;
  border-radius: 8px 0 8px 0;
}
.top10RankNumberMobile .number {
  color: white;
  font-family: "JetBrainsMono-Bold";
  font-size: 56px;
}

.appParentWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 64px;
}
@media (max-width: 480px) {
  .appParentWrapper {
    padding-top: 0px;
  }
}

.ourStoryMobileLayoutWrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 74px;
}

.imageAndStoryWrapperMobile1 {
  width: 95%;
  height: 690px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ourStoryMobileImage {
  width: 393px;
  height: 690px;
  object-fit: cover;
  object-position: left;
  max-width: 100%;
  display: block;
}
@media (min-width: 429px) and (max-width: 480px) {
  .ourStoryMobileImage {
    width: 405px;
  }
}
@media (min-width: 576px) {
  .ourStoryMobileImage {
    width: 576px;
  }
}
@media (min-width: 768px) {
  .ourStoryMobileImage {
    width: 760px;
  }
}

.storyWrapperMobile {
  top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  color: white;
  width: 85%;
  max-height: 100%;
  gap: 15px;
}
.storyWrapperMobile .ourStoryHeadingMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 50px;
}
.storyWrapperMobile .ourStoryContent {
  font-family: "JetBrainsMono-Regular";
  font-size: 1.1rem;
}

.howWereDifferentMobileWrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  height: auto;
  padding: 50px 0px;
  top: 50px;
}
.howWereDifferentMobileWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/background/how-were-different.svg");
  background-size: cover;
  background-position: center;
  filter: blur(15px);
  z-index: -2;
}
.howWereDifferentMobileWrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}
.howWereDifferentMobileWrapper .howWereDifferentMobileText {
  text-align: center;
  width: 95%;
  position: relative;
  z-index: 1;
}
.howWereDifferentMobileWrapper .howWereDifferentMobileHeading {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
.howWereDifferentMobileWrapper .howWereDifferentParaMobile {
  font-family: "JetBrainsMono-light";
  font-size: 18px;
}

.imageAndStoryWrapper2Mobile {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.imageAndStoryWrapper2Mobile .ourMissionImageMobile {
  width: 95%;
}

.ourMissionContentMobileLoading {
  width: 100%;
  height: auto;
  padding: 10px;
}
.ourMissionContentMobileLoading .headingOurMissionMobileLoading {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  margin-bottom: 20px;
}

.ourMissionContentMobile {
  color: #3d1a37;
  margin: 0 10px 20px 10px;
}
.ourMissionContentMobile .headingOurMissionMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  margin-bottom: 20px;
}
.ourMissionContentMobile .bulletPointsLoading {
  width: 750px;
  height: 350px;
}
.ourMissionContentMobile .bulletPointsMobile {
  width: 100%;
  list-style: disc;
  font-family: "JetBrainsMono-light";
  padding-left: 18px;
  font-size: 18px;
  line-height: 30px;
}

.bulletPointsMobileLoading {
  width: 100%;
  height: 276px;
}

.bulletPointMobileLoading {
  width: 277px;
  height: 17px;
}

.ourStoryContentMobile {
  font-family: "JetBrainsMono-Regular";
  font-size: 16px;
}

.ourStoryPageLayoutWrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("/background/creators-page-background.svg");
  padding: 70px 60px;
  gap: 60px;
}

.imageAndStoryWrapper1 {
  position: relative;
}

.imageAndStoryWrapper2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
@media (max-width: 1280px) {
  .imageAndStoryWrapper2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
  .imageAndStoryWrapper2 .ourMissionImage {
    width: 100%;
  }
}

.ourMissionContent {
  color: #3d1a37;
}
.ourMissionContent .heading {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
.ourMissionContent .bulletPointsLoading {
  width: 750px;
  height: 350px;
}
.ourMissionContent .bulletPoints {
  list-style: disc;
  font-family: "JetBrainsMono-light";
  font-size: 17px;
  line-height: 28px;
  padding-left: 18px;
}
@media (max-width: 1280px) {
  .ourMissionContent .bulletPoints {
    font-size: 14px;
    line-height: 26px;
  }
}

.storyWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: white;
  width: 70%;
  gap: 30px;
}
.storyWrapper .ourStoryHeading {
  font-family: "JetBrainsMono-Bold";
  font-size: 4rem;
}
.storyWrapper .ourStoryContent {
  font-family: "JetBrainsMono-Regular";
  font-size: 1.1rem;
}
@media (max-width: 1280px) {
  .storyWrapper {
    width: 100%;
    padding: 10px;
    bottom: 20px;
    left: 0px;
    gap: 10px;
  }
  .storyWrapper .ourStoryHeading {
    font-family: "JetBrainsMono-Bold";
    font-size: 2rem;
  }
  .storyWrapper .ourStoryContent {
    font-family: "JetBrainsMono-Regular";
    font-size: 1rem;
  }
}

.howWereDifferentWrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  height: auto;
  padding: 150px 20px;
}
.howWereDifferentWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/background/how-were-different.svg");
  background-size: cover;
  background-position: center;
  filter: blur(15px);
  z-index: -2;
}
.howWereDifferentWrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}
.howWereDifferentWrapper .howWereDifferentText {
  text-align: center;
  width: 75%;
  position: relative;
  z-index: 1;
}
.howWereDifferentWrapper .howWereDifferentHeading {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
}
.howWereDifferentWrapper .howWereDifferentPara {
  font-family: "JetBrainsMono-light";
  font-size: 18px;
}

.howWereDifferentParaMobileLoading {
  width: 100%;
  height: 430px;
}

.paginateWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.paginationNumberButtons {
  font-family: "JetBrainsMono-Medium";
  color: #836c7f;
  width: 40px;
  height: 40px;
  border: 1px solid #d2d2d2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.currentPageNumber {
  color: #3d1a37;
  font-family: "JetBrainsMono-Medium";
  width: 40px;
  height: 40px;
  border: 1px solid #3d1a37;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}
.shimmerDropdown {
  width: 118px;
  height: 39px;
}

.shimmerFilter {
  margin-top: 30px;
  width: 255px;
  height: 920px;
  border-radius: 8px;
}

.shimmerFilterCreatorsPage {
  width: 255px;
  height: 555px;
  margin-top: 30px;
  border-radius: 8px;
}

.shimmerLoader {
  background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
  background-size: 200px 100%;
  position: relative;
  overflow: hidden;
  display: inline-block;
  animation: shimmer 2s infinite linear;
}

.shimmerLoaderPurple {
  background: linear-gradient(to right, #efebf2 8%, #f7edff 18%, #efebf2 33%);
  background-size: 200px 100%;
  position: relative;
  overflow: hidden;
  display: inline-block;
  animation: shimmer 2s infinite linear;
}

.shimmerComicImage {
  width: 230px;
  height: 357px;
  border-radius: 8px;
}

.shimmerComicImageMobile {
  width: 163px;
  height: 253px;
  border-radius: 8px;
}

.shimmerCreatorCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 188px;
  height: 300px;
  gap: 15px;
}

.shimmerCreatorImage {
  width: 188px;
  height: 188px;
  border-radius: 50%;
}

.shimmerCreatorNameAndSkills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 188px;
  margin-top: 20px;
  gap: 10px;
}

.shimmerCreatorName {
  width: 188px;
  height: 30px;
}

.shimmerCreatorSkills {
  width: 188px;
  height: 10px;
}

.creatorNameLoading {
  width: 94px;
  height: 18px;
  margin: 20px 5px 5px 5px;
}

.storeNameLoading {
  width: 160px;
  height: 18px;
}

.creatorSkillsLoading {
  width: 94px;
  height: 10px;
  margin-bottom: 3px;
}

.shimmerStoreImage {
  width: 240px;
  height: 240px;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .shimmerStoreImage {
    width: 175px;
    height: 175px;
  }
}

.shimmerStoreName {
  width: 240px;
  height: 20px;
}

.cardContainerMobileShimmer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 690px;
  width: 563px;
  position: relative;
  border-radius: 20px;
  top: -85px;
}
@media (max-width: 576px) {
  .cardContainerMobileShimmer {
    height: 690px;
    width: 363px;
  }
}

.cardContainerShimmer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 660px;
  width: 1392px;
  position: relative;
  border-radius: 20px;
  top: -60px;
}
@media (max-width: 576px) {
  .cardContainerShimmer {
    height: 1859px;
    width: 363px;
  }
}
@media (min-width: 576px) and (max-width: 1422px) {
  .cardContainerShimmer {
    height: 662px;
    width: 563px;
  }
}

.dropdownMenuSegment {
  width: 118px;
  height: 39px;
}

.emptyTitlePlaceholder {
  width: 72px;
  height: 36px;
}

.dropdownMenuSegmentShimmerThree {
  width: 136px;
  height: 40px;
}

.dropdownMenuSegmentShimmerTwo {
  width: 96px;
  height: 39px;
}

.dropdownMenuSegmentShimmer {
  width: 90px;
  height: 35px;
}

.newReleaseNameLoading {
  width: 163px;
  height: 22px;
}

.newReleaseStoreLoading {
  width: 163px;
  height: 20px;
}

.genreCardShimmer {
  min-width: 248px;
  min-height: 248px;
}

.storeCardShimmer {
  width: 313px;
  height: 313px;
  border-radius: 16px;
}
@media (max-width: 576px) {
  .storeCardShimmer {
    width: 174px;
    height: 159px;
  }
}

.storeTitleShimmer {
  width: 300px;
  height: 20px;
  margin-top: 16px;
}

.creatorSectionNameShimmer {
  width: 140px;
  height: 16px;
  margin-top: 10px;
}

.creatorSectionSkillsShimmer {
  width: 140px;
  height: 14px;
  margin-top: 10px;
}

.creatorSectionNameShimmerMobile {
  width: 100px;
  height: 16px;
  margin-top: 10px;
}

.creatorSectionSkillsShimmerMobile {
  width: 100px;
  height: 14px;
  margin-top: 10px;
}

.range-slider {
  height: 5px !important;
  margin: 15px 0 10px;
}

.range-slider .range-slider__range {
  background: #3d1a37;
  height: 5px !important;
}

.range-slider .range-slider__thumb {
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #3d1a37 !important;
  background-color: white !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.toggle-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 0; /* To fix any spacing issues with SVG */
}

.title {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
  font-family: "JetBrainsMono-Bold", monospace;
}

.rangeAndButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.range {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-family: "JetBrainsMono-Regular", monospace;
}

.genresList {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: "JetBrainsMono-Regular", monospace;
  margin-top: 5px;
  margin-bottom: 5px;
}

.genresList label {
  display: flex;
  align-items: center;
  font-size: 15px;
  cursor: pointer;
}

.genreCheckbox {
  margin-right: 10px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 2px;
}

.arrowAndTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.sliderWrapper {
  width: 100%;
  margin-bottom: 5px;
}

:root {
  --rpv-core__annotation--link-hover-background-color: rgba(255, 255, 0, 0.2);
  --rpv-core__annotation-popup-wrapper-background-color: #faf089;
  --rpv-core__annotation-popup-wrapper-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --rpv-core__annotation-popup-content-border-top-color: #1a202c;
  --rpv-core__arrow-border-color: rgba(0, 0, 0, 0.3);
  --rpv-core__asking-password-color: #000;
  --rpv-core__asking-password-wrapper-background-color: #fff;
  --rpv-core__asking-password-wrapper-border-color: rgba(0, 0, 0, 0.3);
  --rpv-core__button-background-color: rgba(0, 0, 0, 0.3);
  --rpv-core__button-color: #000;
  --rpv-core__doc-error-background-color: #fff;
  --rpv-core__doc-error-text-background-color: #c02424;
  --rpv-core__doc-error-text-color: #fff;
  --rpv-core__doc-loading-background-color: #fff;
  --rpv-core__full-screen-target-background-color: #fff;
  --rpv-core__inner-page-background-color: #fff;
  --rpv-core__menu-divider-border-bottom-color: rgba(0, 0, 0, 0.3);
  --rpv-core__menu-item-color: #000;
  --rpv-core__menu-item--hover-background-color: rgba(0, 0, 0, 0.1);
  --rpv-core__menu-item--disabled-color: rgba(0, 0, 0, 0.3);
  --rpv-core__minimal-button-color: #000;
  --rpv-core__minimal-button--hover-background-color: rgba(0, 0, 0, 0.1);
  --rpv-core__minimal-button--disabled-color: rgba(0, 0, 0, 0.3);
  --rpv-core__minimal-button--selected-background-color: rgba(0, 0, 0, 0.1);
  --rpv-core__modal-body-background-color: #fff;
  --rpv-core__modal-body-border-color: rgba(0, 0, 0, 0.3);
  --rpv-core__modal-overlay-background-color: rgba(0, 0, 0, 0.5);
  --rpv-core__page-layer-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
  --rpv-core__popover-body-background-color: #fff;
  --rpv-core__popover-body-border-color: rgba(0, 0, 0, 0.3);
  --rpv-core__popover-body-color: #000;
  --rpv-core__primary-button-background-color: #2566e8;
  --rpv-core__primary-button-color: #fff;
  --rpv-core__progress-bar-background-color: rgba(0, 0, 0, 0.1);
  --rpv-core__progress-bar-progress-background-color: #2566e8;
  --rpv-core__progress-bar-progress-color: #fff;
  --rpv-core__separator-border-bottom-color: rgba(0, 0, 0, 0.3);
  --rpv-core__spinner-border-color: rgba(0, 0, 0, 0.4);
  --rpv-core__spinner-border-transparent-color: transparent;
  --rpv-core__splitter-background-color: transparent;
  --rpv-core__splitter--hover-background-color: rgba(0, 0, 0, 0.2);
  --rpv-core__text-layer-text--selection-background-color: rgb(0, 0, 255, 1);
  --rpv-core__text-layer-text--selection-color: transparent;
  --rpv-core__textbox-background-color: #fff;
  --rpv-core__textbox-border-color: rgba(0, 0, 0, 0.2);
  --rpv-core__textbox-color: #000;
  --rpv-core__tooltip-body-background-color: #000;
  --rpv-core__tooltip-body-color: #fff;
}

.rpv-core__viewer--dark {
  --rpv-core__asking-password-background-color: #363636;
  --rpv-core__asking-password-color: #fff;
  --rpv-core__asking-password-wrapper-border-color: #191919;
  --rpv-core__asking-password-wrapper-background-color: #191919;
  --rpv-core__button-background-color: #171717;
  --rpv-core__button-color: #fff;
  --rpv-core__doc-error-background-color: #191919;
  --rpv-core__doc-error-text-background-color: #c02323;
  --rpv-core__doc-error-text-color: #fff;
  --rpv-core__doc-loading-background-color: #191919;
  --rpv-core__full-screen-target-background-color: #1a1a1a;
  --rpv-core__inner-page-background-color: #1a1a1a;
  --rpv-core__menu-divider-border-bottom-color: #000;
  --rpv-core__menu-item-color: #fff;
  --rpv-core__menu-item--hover-background-color: #2566e8;
  --rpv-core__menu-item--disabled-color: #5e5e5e;
  --rpv-core__minimal-button-color: #fff;
  --rpv-core__minimal-button--disabled-color: #5e5e5e;
  --rpv-core__minimal-button--hover-background-color: #191919;
  --rpv-core__minimal-button--selected-background-color: #1657bb;
  --rpv-core__modal-body-background-color: #363636;
  --rpv-core__primary-button-background-color: #2566e8;
  --rpv-core__popover-body-background-color: #363636;
  --rpv-core__popover-body-color: #fff;
  --rpv-core__progress-bar-background-color: #000;
  --rpv-core__separator-border-bottom-color: #000;
  --rpv-core__spinner-border-color: #fff;
  --rpv-core__splitter-background-color: #1a1a1a;
  --rpv-core__splitter--hover-background-color: #2566e8;
  --rpv-core__textbox-background-color: #121212;
  --rpv-core__textbox-border-color: #121212;
  --rpv-core__textbox-color: #fff;
  --rpv-core__tooltip-body-background-color: #414141;
  --rpv-core__tooltip-body-color: #fff;
}

.rpv-core__annotation {
  position: absolute;
}

.rpv-core__annotation-layer {
  z-index: 1;
}

.rpv-core__arrow {
  border-bottom: 1px solid var(--rpv-core__arrow-border-color);
  border-left-color: var(--rpv-core__arrow-border-color);
  border-right: 1px solid var(--rpv-core__arrow-border-color);
  border-top-color: var(--rpv-core__arrow-border-color);
  height: 10px;
  position: absolute;
  width: 10px;
  z-index: 0;
}

.rpv-core__arrow--tl {
  bottom: 0;
  left: 0;
  transform: translate(50%, 50%) rotate(45deg);
}

.rpv-core__arrow--tc {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
}

.rpv-core__arrow--tr {
  bottom: 0;
  right: 0;
  transform: translate(-50%, 50%) rotate(45deg);
}

.rpv-core__arrow--rt {
  left: 0;
  top: 0;
  transform: translate(-50%, 50%) rotate(135deg);
}

.rpv-core__arrow--rc {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
}

.rpv-core__arrow--rb {
  bottom: 0;
  left: 0;
  transform: translate(-50%, -50%) rotate(135deg);
}

.rpv-core__arrow--bl {
  left: 0;
  top: 0;
  transform: translate(50%, -50%) rotate(225deg);
}

.rpv-core__arrow--bc {
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%) rotate(225deg);
}

.rpv-core__arrow--br {
  right: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(225deg);
}

.rpv-core__arrow--lt {
  right: 0;
  top: 0;
  transform: translate(50%, 50%) rotate(315deg);
}

.rpv-core__arrow--lc {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%) rotate(315deg);
}

.rpv-core__arrow--lb {
  bottom: 0;
  right: 0;
  transform: translate(50%, -50%) rotate(315deg);
}

.rpv-core__asking-password {
  background-color: var(--rpv-core__asking-password-background-color);
  border-radius: 0.25rem;
  color: var(--rpv-core__asking-password-color);
  padding: 2rem;
}

.rpv-core__asking-password--rtl {
  direction: rtl;
}

.rpv-core__asking-password-wrapper {
  align-items: center;
  background-color: var(--rpv-core__asking-password-wrapper-background-color);
  border: 1px solid var(--rpv-core__asking-password-wrapper-border-color);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.rpv-core__asking-password-message {
  margin: 0.5rem 0;
}

.rpv-core__asking-password-body {
  align-items: center;
  display: flex;
  justify-content: center;
}

.rpv-core__asking-password-input {
  width: 15rem;
}

.rpv-core__asking-password-input--ltr {
  margin-right: 0.5rem;
}

.rpv-core__asking-password-input--rtl {
  margin-left: 0.5rem;
}

.rpv-core__button {
  background-color: var(--rpv-core__button-background-color);
  border: none;
  border-radius: 0.25rem;
  color: var(--rpv-core__button-color);
  cursor: pointer;
  height: 2rem;
  padding: 0 1rem;
}

.rpv-core__button--rtl {
  direction: rtl;
}

.rpv-core__canvas-layer {
  direction: ltr;
  left: 0;
  position: absolute;
  overflow: hidden;
  top: 0;
}

.rpv-core__doc-error {
  align-items: center;
  background-color: var(--rpv-core__doc-error-background-color);
  display: flex;
  justify-content: center;
  height: 100%;
}

.rpv-core__doc-error--rtl {
  direction: rtl;
}

.rpv-core__doc-error-text {
  background-color: var(--rpv-core__doc-error-text-background-color);
  border-radius: 0.25rem;
  color: var(--rpv-core__doc-error-text-color);
  line-height: 1.5;
  max-width: 50%;
  padding: 0.5rem;
}

.rpv-core__doc-loading {
  background-color: var(--rpv-core__doc-loading-background-color);
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: inherit;
}

.rpv-core__doc-loading--rtl {
  direction: rtl;
}

.rpv-core__icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  text-align: center;
}

.rpv-core__icon--rtl {
  transform: scale(-1, 1);
}

.rpv-core__inner-container {
  min-height: inherit;
}

.rpv-core__inner-pages {
  overflow: auto;
}

.rpv-core__inner-pages--rtl {
  direction: rtl;
}

.rpv-core__inner-pages--single {
  overflow: hidden;
}

.rpv-core__inner-page-container--single {
  overflow: auto;
}

.rpv-core__inner-page {
  background-color: var(--rpv-core__inner-page-background-color);
}

.rpv-core__inner-page--single {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpv-core__inner-page--dual-even {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rpv-core__inner-page--dual-odd {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.rpv-core__inner-page--dual-cover {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpv-core__inner-page--dual-cover-odd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rpv-core__inner-page--dual-cover-even {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.rpv-core__annotation--link a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.rpv-core__annotation--link a:hover {
  background-color: var(--rpv-core__annotation--link-hover-background-color);
}

.rpv-core__menu {
  display: flex;
  flex-direction: column;
}

.rpv-core__menu--rtl {
  direction: rtl;
  text-align: right;
}

.rpv-core__menu-divider {
  border-bottom: 1px solid var(--rpv-core__menu-divider-border-bottom-color);
  margin: 0.25rem 0;
}

.rpv-core__menu-item {
  align-items: center;
  background-color: rgba(0, 0, 0, 0);
  color: var(--rpv-core__menu-item-color);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
  width: 100%;
}

.rpv-core__menu-item:focus {
  background-color: var(--rpv-core__menu-item--hover-background-color);
  outline: 0;
}

.rpv-core__menu-item:hover {
  background-color: var(--rpv-core__menu-item--hover-background-color);
}

.rpv-core__menu-item-icon {
  align-items: center;
  display: flex;
}

.rpv-core__menu-item-icon--ltr {
  padding-left: 1rem;
  padding-right: 0.5rem;
}

.rpv-core__menu-item-icon--rtl {
  padding-left: 0.5rem;
  padding-right: 1rem;
}

.rpv-core__menu-item-label {
  flex-grow: 1;
  flex-shrink: 1;
  white-space: nowrap;
}

.rpv-core__menu-item-label--ltr {
  padding-right: 2rem;
}

.rpv-core__menu-item-label--rtl {
  padding-left: 2rem;
}

.rpv-core__menu-item-check--ltr {
  padding-right: 1rem;
}

.rpv-core__menu-item-check--rtl {
  padding-left: 1rem;
}

.rpv-core__menu-item--disabled {
  color: var(--rpv-core__menu-item--disabled-color);
}

.rpv-core__menu-item--disabled:hover {
  background-color: rgba(0, 0, 0, 0);
}

.rpv-core__menu-item--ltr {
  text-align: left;
}

.rpv-core__menu-item--rtl {
  direction: rtl;
  text-align: right;
}

.rpv-core__minimal-button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0.25rem;
  color: var(--rpv-core__minimal-button-color);
  cursor: pointer;
  height: 2rem;
  padding: 0 0.5rem;
}

.rpv-core__minimal-button:hover {
  background-color: var(--rpv-core__minimal-button--hover-background-color);
}

.rpv-core__minimal-button--disabled {
  color: var(--rpv-core__minimal-button--disabled-color);
}

.rpv-core__minimal-button--rtl {
  direction: rtl;
}

.rpv-core__minimal-button--selected {
  background-color: var(--rpv-core__minimal-button--selected-background-color);
}

.rpv-core__modal-body {
  background-color: var(--rpv-core__modal-body-background-color);
  border: 1px solid var(--rpv-core__modal-body-border-color);
  border-radius: 0.25rem;
  margin: 1rem;
  max-width: 32rem;
  overflow: auto;
}

.rpv-core__modal-body--rtl {
  direction: rtl;
}

.rpv-core__modal-overlay {
  background-color: var(--rpv-core__modal-overlay-background-color);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
  align-items: center;
  display: flex;
  justify-content: center;
}

.rpv-core__page-layer {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
}

.rpv-core__page-layer::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  right: 0.25rem;
  top: 0.25rem;
  box-shadow: var(--rpv-core__page-layer-box-shadow);
}

.rpv-core__page-layer--single {
  margin: 0 auto;
}

.rpv-core__page-size-calculator {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.rpv-core__popover-body {
  background-color: var(--rpv-core__popover-body-background-color);
  border: 1px solid var(--rpv-core__popover-body-border-color);
  border-radius: 0.25rem;
  color: var(--rpv-core__popover-body-color);
  left: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: -9999px;
  z-index: 9999;
}

.rpv-core__popover-body-arrow {
  background-color: var(--rpv-core__popover-body-background-color);
}

.rpv-core__popover-body--rtl {
  direction: rtl;
}

.rpv-core__popover-overlay {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.rpv-core__annotation-popup-wrapper {
  background-color: var(--rpv-core__annotation-popup-wrapper-background-color);
  box-shadow: var(--rpv-core__annotation-popup-wrapper-box-shadow);
  font-size: 0.75rem;
  padding: 0.25rem;
  word-break: break-word;
}

.rpv-core__annotation-popup-wrapper--rtl {
  direction: rtl;
}

.rpv-core__annotation-popup-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.rpv-core__annotation-popup-date {
  font-size: 0.5rem;
}

.rpv-core__annotation-popup-content {
  border-top: 1px solid var(--rpv-core__annotation-popup-content-border-top-color);
  padding: 0.25rem;
  max-height: 16rem;
  overflow: auto;
}

.rpv-core__primary-button {
  background-color: var(--rpv-core__primary-button-background-color);
  border: none;
  border-radius: 0.25rem;
  color: var(--rpv-core__primary-button-color);
  cursor: pointer;
  height: 2rem;
  padding: 0 1rem;
}

.rpv-core__primary-button--rtl {
  direction: rtl;
}

.rpv-core__progress-bar {
  background-color: var(--rpv-core__progress-bar-background-color);
  border-radius: 9999px;
  padding: 0.125rem;
}

.rpv-core__progress-bar--rtl {
  direction: rtl;
}

.rpv-core__progress-bar-progress {
  align-items: center;
  background-color: var(--rpv-core__progress-bar-progress-background-color);
  border-radius: 9999px;
  color: var(--rpv-core__progress-bar-progress-color);
  display: flex;
  font-size: 0.75rem;
  justify-content: center;
  height: 0.75rem;
}

.rpv-core__separator {
  border-bottom: 1px solid var(--rpv-core__separator-border-bottom-color);
}

.rpv-core__spinner {
  border-bottom: 2px solid var(--rpv-core__spinner-border-transparent-color);
  border-left: 2px solid var(--rpv-core__spinner-border-transparent-color);
  border-right: 2px solid var(--rpv-core__spinner-border-color);
  border-top: 2px solid var(--rpv-core__spinner-border-color);
  border-radius: 9999px;
}

.rpv-core__spinner--animating {
  animation-duration: 0.4s;
  animation-name: rpv-core__spinner-transform;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rpv-core__spinner-transform {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rpv-core__splitter {
  background-color: var(--rpv-core__splitter-background-color);
  cursor: ew-resize;
  height: 100%;
  width: 0.25rem;
}

.rpv-core__splitter:hover, .rpv-core__splitter--resizing {
  cursor: col-resize;
  background-color: var(--rpv-core__splitter--hover-background-color);
}

.rpv-core__splitter-body--resizing {
  cursor: col-resize;
}

.rpv-core__splitter-sibling--resizing {
  pointer-events: none;
  user-select: none;
}

.rpv-core__textbox {
  background-color: var(--rpv-core__textbox-background-color);
  border: 1px solid var(--rpv-core__textbox-border-color);
  box-sizing: border-box;
  border-radius: 0.25rem;
  color: var(--rpv-core__textbox-color);
  padding: 0 0.5rem;
  height: 2rem;
  width: 100%;
}

.rpv-core__textbox--rtl {
  direction: rtl;
}

.rpv-core__text-layer {
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.2;
  line-height: 1;
  z-index: 1;
}

.rpv-core__text-layer span::selection {
  background-color: var(--rpv-core__text-layer-text--selection-background-color);
  color: var(--rpv-core__text-layer-text--selection-color);
}

.rpv-core__text-layer br::selection {
  color: rgba(0, 0, 0, 0);
}

.rpv-core__text-layer-text {
  color: rgba(0, 0, 0, 0);
  cursor: text;
  position: absolute;
  transform-origin: 0% 0%;
  white-space: pre;
}

.rpv-core__tooltip-body {
  background-color: var(--rpv-core__tooltip-body-background-color);
  border-radius: 0.25rem;
  color: var(--rpv-core__tooltip-body-color);
  left: 0;
  max-width: 20rem;
  position: absolute;
  text-align: center;
  top: -9999px;
  z-index: 9999;
}

.rpv-core__tooltip-body--rtl {
  direction: rtl;
}

.rpv-core__tooltip-body-arrow {
  background-color: var(--rpv-core__tooltip-body-background-color);
}

.rpv-core__tooltip-body-content {
  padding: 0.5rem;
}

.rpv-core__display--block {
  display: block;
}

.rpv-core__display--hidden {
  display: none;
}

@media (min-width: 640px) {
  .rpv-core__display--hidden-small {
    display: none;
  }
  .rpv-core__display--block-small {
    display: block;
  }
}
@media (min-width: 768px) {
  .rpv-core__display--hidden-medium {
    display: none;
  }
  .rpv-core__display--block-medium {
    display: block;
  }
}
@media (min-width: 1024px) {
  .rpv-core__display--hidden-large {
    display: none;
  }
  .rpv-core__display--block-large {
    display: block;
  }
}
.rpv-core__viewer {
  min-height: inherit;
}

.web-tab-title {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 28px;
}

.detailBoxesWrapper {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.detailBoxesWrapperMobile {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 30px 0px;
}

.detailBox {
  width: 160px;
  height: 105px;
  background-color: white;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.detailBoxMobile {
  width: 100px;
  height: 105px;
  background-color: white;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.detailBoxTitle {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  color: black;
}

.detailBoxDetail {
  color: #5d2f55;
  font-family: "JetBrainsMono-Regular";
  font-size: 12px;
}

.pledgeButton {
  width: 500px;
  height: 40px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  font-family: "JetBrainsMono-Bold";
  border: 1px solid #d2d2d2;
  font-size: 16px;
  color: #5d2f55;
  font-weight: 600;
  padding: 8px 20px;
}
.pledgeButton:hover {
  background-color: #5d2f55;
  color: white;
}
@media (max-width: 768px) {
  .pledgeButton {
    width: 355px;
  }
}

.pledge-container {
  width: 90%;
  border-radius: 12px;
  font-family: "JetBrainsMono-Bold";
}
@media (max-width: 768px) {
  .pledge-container {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.progress-bar {
  position: relative;
  width: 500px;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid white;
}
@media (max-width: 768px) {
  .progress-bar {
    width: 355px;
  }
}

.progress-fill {
  height: 100%;
  background-color: #5d2f55;
  border-radius: 12px 0 0 12px;
}

.pledge-stats {
  width: 500px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: white;
}
@media (max-width: 768px) {
  .pledge-stats {
    width: 355px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: black;
  }
}

.kickstarter-image {
  position: absolute;
  top: 50px;
  left: 30px;
  width: 423px;
  height: 588px;
  border-radius: 8px;
}
@media (min-width: 1024px) and (max-width: 1422px) {
  .kickstarter-image {
    width: 284px;
    height: 478px;
    top: 139px;
    left: 40px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .kickstarter-image {
    width: 220px;
    height: 370px;
    top: 159px;
  }
}

.kickStarterFeedWrapperWeb {
  display: grid;
  grid-template-columns: 60% 40%;
  padding: 40px;
}
@media (min-width: 768px) and (max-width: 1280px) {
  .kickStarterFeedWrapperWeb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.tab-content {
  font-family: "JetBrainsMono-Regular";
}

.blurredBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px);
  opacity: 0.8;
  z-index: -1;
}

.campaign-container {
  width: 100%;
  position: relative;
}

.feed-layout {
  display: flex;
  min-height: calc(100vh - 112px);
}

.feed-sidebar {
  width: 200px;
  padding: 20px;
  position: sticky;
  top: 112px;
  height: calc(100vh - 112px);
  overflow-y: auto;
  background: white;
  z-index: 1;
}

.feed-sidebar ul {
  list-style: none;
  padding: 0;
}

.feed-sidebar li {
  margin-bottom: 15px;
}

.feed-sidebar button {
  background: none;
  border: none;
  color: #836c7f;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  font-family: "JetBrainsMono-Bold";
  width: 100%;
  border-left: 2px solid transparent;
  transition: border-left-color 0.2s ease;
  line-height: 0.8;
  margin: 2px 0;
  padding: 5px 5px 5px 10px;
}
.feed-sidebar button:hover {
  text-decoration: underline;
}
.feed-sidebar button.active {
  border-left: 2px solid #5d2f55;
  color: #5d2f55;
}

.feed-content {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  font-family: "JetBrainsMono-Regular";
  min-height: calc(100vh - 112px);
  max-width: 820px;
}
.feed-content img {
  width: 100%;
  border-radius: 8px;
}

.feed-section {
  margin: 10px;
  margin-bottom: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid #ddd;
  background: white;
}

.feed-section h2 {
  margin-top: 0;
}

.reward-cards-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

.reward-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}
.reward-card.reward-card-pledged {
  border: 2px solid #e1beff;
}

.card-image-rewards {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content-rewards {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.title-price-rewards {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-price-rewards h3 {
  font-family: "JetBrainsMono-Bold";
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.title-price-rewards .price-rewards {
  font-family: "JetBrainsMono-Bold";
  font-size: 20px;
  font-weight: 700;
  color: #836c7f;
}

.description-rewards {
  font-family: "JetBrainsMono-Regular";
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.card-stats-rewards {
  font-family: "JetBrainsMono-Regular";
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.card-stats-rewards .stat-rewards {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-stats-rewards .stat-rewards .stat-label-rewards {
  font-size: 12px;
  color: #666;
}
.card-stats-rewards .stat-rewards .stat-value-rewards {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.card-actions-rewards {
  display: flex;
  gap: 10px;
  font-family: "JetBrainsMono-Regular";
}

.pledge-btn {
  display: inline-block;
  width: 100%;
  padding: 10px;
  border: 1px solid #836c7f;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: "JetBrainsMono-Bold";
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #836c7f;
  color: white;
}
.pledge-btn:hover {
  border: 1px solid #d2d2d2;
  background: white;
  color: #836c7f;
}
.pledge-btn.pledge-btn-disabled {
  background: #d5d7da;
  color: #999;
  border: 1px solid #d5d7da;
  cursor: not-allowed;
  opacity: 0.7;
}
.pledge-btn.pledge-btn-disabled:hover {
  background: #d5d7da;
  color: #999;
  border: 1px solid #d5d7da;
}

.pledges-title-loading {
  width: 300px;
  height: 21px;
}

.bundle-title-loading {
  width: 180px;
  height: 25px;
}

.pledges-title-loading-mobile {
  width: 240px;
  height: 21px;
}

.pledges-description-loading {
  width: 300px;
  height: 15px;
}

.reward-card-mobile {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  flex-direction: column;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}
.reward-card-mobile.reward-card-pledged {
  border: 1px solid #ffd700;
}

.kickstarterPageMobileParent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mobile-feed-container {
  padding: 0;
  margin: 0;
  width: 100%;
}

.mobile-sentinel {
  height: 1px;
}

.mobile-anchor-menu {
  background-color: white;
  width: 100%;
  z-index: 9;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.mobile-anchor-menu.sticky {
  width: 100%;
  position: sticky;
  top: 64px;
  z-index: 9;
}

.mobile-menu-toggle {
  width: 100%;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
}

.mobile-menu-dropdown {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: #f9f9f9;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.mobile-menu-dropdown li button {
  width: 100%;
  padding: 12px 16px;
  background: white;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  color: #836c7f;
}

.mobile-menu-dropdown li button:hover {
  background: #f0f0f0;
}

.mobile-feed-section {
  padding: 16px 0px;
  border-bottom: 1px solid #eee;
  scroll-margin-top: 112px;
  width: 100%;
}

.mobile-tag-heading {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  font-size: 18px;
  margin-bottom: 10px;
}

.feed-tag-sections-wrapper {
  width: 100%;
  padding-top: 20px;
}

.mobile-menu-dropdown button.active {
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
}

.stickyPledgeButtonContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  z-index: 100;
  transition: transform 0.3s ease, opacity 0.2s ease;
  display: flex;
  justify-content: center;
}
.stickyPledgeButtonContainer.hidden {
  transform: translateY(100%);
  opacity: 0;
}
.stickyPledgeButtonContainer.visible {
  transform: translateY(0);
  opacity: 1;
}
.stickyPledgeButtonContainer .pledgeButton {
  width: 355px;
  margin: 0 auto;
}

html {
  scroll-behavior: smooth;
}

.socialsDetailsWrapperMobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 90vw;
}

.mobile-content-section {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  word-break: break-word;
  font-size: 14px;
}
.mobile-content-section img {
  align-self: center;
  border-radius: 8px;
  margin: 16px 0px;
  width: 100%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.projectsSectionWrapperWeb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  width: 100%;
  height: fit-content;
  padding-top: 70px;
  padding-bottom: 50px;
}

.projectsListWebWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  padding: 40px 30px 30px 30px;
  flex-wrap: wrap;
  border: none;
}

.kickstarterImageWeb {
  align-self: flex-start;
  width: 412px;
  height: 383px;
  object-fit: cover;
  object-position: top;
  border-radius: 16px;
}
@media (max-width: 576px) {
  .kickstarterImageWeb {
    width: 363px;
  }
}

.kickstarterDetailsWeb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.kickstarterTitleWeb {
  font-size: 20px;
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
}

.kickstarterStoreName {
  margin: 10px;
  font-size: 12px;
  color: #836c7f;
  font-family: "JetBrainsMono-Bold";
}

.kickstarterPledgeStats {
  font-size: 12px;
  color: #836c7f;
  font-family: "JetBrainsMono-Bold";
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.progress-bar-kickstarter {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid white;
}
@media (max-width: 768px) {
  .progress-bar-kickstarter {
    width: 280px;
  }
}

.kickstarterCardWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 412px;
  border-radius: 16px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 16px;
  background-color: white;
}
@media (max-width: 576px) {
  .kickstarterCardWrapper {
    width: 363px;
  }
}

.kickstarterCardBlurb {
  width: 100%;
  font-size: 12px;
  font-family: "JetBrainsMono-Regular";
  color: black;
  flex-wrap: wrap;
}
.kickstarterCardBlurb img {
  width: 272px;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .kickstarterCardBlurb {
    padding: 0px;
  }
}
@media (min-width: 768px) {
  .kickstarterCardBlurb {
    height: 135px;
    overflow: scroll;
    padding: 0 20px;
  }
}

.KickstarterHomePageCardParent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 612px;
  min-height: 800px;
  border-radius: 16px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: white;
  overflow: hidden;
}
@media (max-width: 576px) {
  .KickstarterHomePageCardParent {
    width: 363px;
  }
}
@media (min-width: 768px) {
  .KickstarterHomePageCardParent {
    min-height: 840px;
  }
}

.KickstarterHomePageCardLoading {
  width: 612px;
  min-height: 800px;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
@media (max-width: 576px) {
  .KickstarterHomePageCardLoading {
    width: 363px;
  }
}

.kickstarterCardImage {
  width: 100%;
  height: 483px;
  object-fit: cover;
  object-position: top;
  border-radius: 16px 16px 0 0;
}
@media (max-width: 576px) {
  .kickstarterCardImage {
    width: 100%;
  }
}

.kickstarterCardButtonWrapper {
  display: flex;
  width: 100%;
}

.kickstarterCardButton {
  font-family: "JetBrainsMono-Bold";
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #836c7f;
  color: white;
  margin: 10px;
  border: 1px solid #836c7f;
  width: 100%;
}
.kickstarterCardButton:hover {
  background: white;
  color: #836c7f;
  border: 1px solid #d2d2d2;
}

.kickstarterDetailsWebWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  background-color: white;
  padding: 10px 0px 0px 0px;
  width: 100%;
  height: auto;
  min-height: 55%;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
@media (max-width: 768px) {
  .kickstarterDetailsWebWrapper {
    padding: 20px;
  }
}

.projectsSectionMobileWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.projectsSectionMobileList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 30px 0px;
}

.KickstarterHomePageCardParentMobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 312px;
  min-height: 800px;
  border-radius: 16px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: white;
  overflow: hidden;
}

.KickstarterHomePageCardLoadingMobile {
  width: 312px;
  min-height: 800px;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.mobileCartLayoutWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 64px;
  padding: 30px 10px 0px 10px;
}

.yourCartMobileTitle {
  font-family: "JetBrainsMono-Bold";
  color: black;
  align-self: flex-start;
  font-size: 24px;
  margin-bottom: 20px;
}

.checkoutDetailsConfirmationMobile {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid #e1beff;
  border-radius: 8px;
  background-color: #fdfbff;
  gap: 15px;
  margin-bottom: 20px;
}

.subtotalTextMobile {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  color: #836c7f;
}

.cartCartListMobile {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.cartCardWebWrapperMobile {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  padding: 12px;
  gap: 20px;
  align-items: flex-start;
}

.cartCardImageAndButtonMobile {
  width: 148px;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}

.bookDetailsCartCardMobile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  flex: 1;
}

.cardAndDescriptionMobile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.cartCardImageMobile {
  width: 148px;
  height: 222px;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  cursor: pointer;
}

.cardPriceMobile {
  font-size: 34px;
  color: #3d1a37;
  font-family: "JetBrainsMono-Bold";
}

.extraMargin {
  margin-top: 20px;
}

.buttonToLoadingMobile {
  width: 88px;
  height: 40px;
}

.signInButtonLoading {
  width: 196px;
  height: 40px;
}

.cardCartTitleMobileLoading {
  width: 216px;
  height: 36px;
}

.cardPriceMobileLoading {
  width: 120px;
  height: 51px;
}

.otherDeetsLoading {
  width: 216px;
  height: 31px;
}

.cartWrapperWeb {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding-bottom: 40px;
}

.cartParentWeb {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
@media (min-width: 768px) and (max-width: 1280px) {
  .cartParentWeb {
    gap: 10px;
  }
}

.cartLeftSide {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 40px 30px;
}

.cartRightSide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 30px 0 0;
}

.cartCardWebWrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  padding: 24px;
}
@media (min-width: 768px) and (max-width: 1280px) {
  .cartCardWebWrapper {
    gap: 10px;
  }
}

.bookDetailsCartCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  height: 100%;
}
@media (min-width: 768px) and (max-width: 1280px) {
  .bookDetailsCartCard {
    gap: 10px;
  }
}

.cardAndDescription {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 24px;
}

.cartCardImage {
  width: 148px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  cursor: pointer;
}

.cartCardTitle {
  font-size: 24px;
  font-family: "JetBrainsMono-Bold";
}

.cartCardFeilds {
  font-family: "JetBrainsMono-Regular";
  font-size: 18px;
  color: #836c7f;
}

.subtotalText {
  font-family: "JetBrainsMono-Bold";
  font-size: 20px;
  color: #836c7f;
}

.cartCardFeildsWrapper {
  gap: 10px;
}

.cardPrice {
  font-size: 24px;
  color: #3d1a37;
  font-family: "JetBrainsMono-Bold";
}

.finalPrice {
  font-size: 42px;
  color: #3d1a37;
  font-family: "JetBrainsMono-Bold";
}

.removeButton {
  font-family: "JetBrainsMono-Bold";
  font-size: 15px;
  color: #3d1a37;
  border: 1px solid #d2d2d2;
  padding: 8px 16px;
  cursor: pointer;
}
.removeButton:hover {
  background-color: #5d2f55;
  color: white;
  border: 1px solid #5d2f55;
}

.checkoutDetailsConfirmation {
  padding: 20px;
  width: 390px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid #e1beff;
  border-radius: 8px;
  background-color: #fdfbff;
  gap: 30px;
}
@media (min-width: 768px) and (max-width: 1280px) {
  .checkoutDetailsConfirmation {
    gap: 20px;
    width: 200px;
  }
}

.emptyCartState {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  text-align: center;
}
.emptyCartState h2 {
  font-family: "JetBrainsMono-Bold";
  font-size: 24px;
  color: #5d2f55;
  margin-bottom: 1rem;
}
.emptyCartState p {
  font-family: "JetBrainsMono-Regular";
  font-size: 16px;
  color: #6d6c6c;
  margin-bottom: 1.5rem;
}

.cartCardImageLoading {
  width: 148px;
  height: 225px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
}

.cartCardTitleLoading {
  width: 240px;
  height: 18px;
}

.cartCardFeildsLoading {
  width: 180px;
  height: 14px;
}

.cartButtonWebLoading {
  width: 89px;
  height: 40px;
}

.continueButtonWebLoading {
  width: 190px;
  height: 45px;
}

.checkoutButtonLoading {
  width: 145px;
  height: 40px;
}

.finalPriceLoading {
  width: 155px;
  height: 47px;
}

.postPageWebWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
}

.postBackgroundWeb {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.postBackgroundImageWeb {
  background-image: url("/background/main-section-background.svg");
  height: 485px;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.bottomDivBackgroundWeb {
  width: 100%;
  background-color: white;
  flex: 1;
  min-height: calc(100vh - 485px);
}

.blogWebContent {
  position: relative;
  z-index: 2;
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 200px;
  margin-bottom: 40px;
  min-height: 400px;
  gap: 30px;
}

.postTitleWeb {
  font-family: "JetBrainsMono-Bold";
  color: black;
  font-size: 24px;
}

.postArticleType {
  margin-top: 20px;
}

.articleBodyWeb {
  font-family: "JetBrainsMono-light";
  color: black;
  font-size: 16px;
}
.articleBodyWeb img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.blogMobileContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: white;
}

.postBackgroundImageMobile {
  background-image: url("/background/main-section-background.svg");
  height: 204px;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.blogMobileDetails {
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  gap: 10px;
}

.mobilePurchasesListWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 74px 0px 40px 0px;
  gap: 10px;
  padding: 10px 0;
}

.purchaseCardMobile {
  width: 95%;
  display: flex;
  flex-direction: row;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  padding: 12px;
  gap: 10px;
  align-items: flex-start;
}

.purchaseMobileButtonsWrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
@media (max-width: 429px) {
  .purchaseMobileButtonsWrapper {
    flex-direction: column;
  }
}

.purchasesMobileTitle {
  margin-left: 20px;
}

.purchaseCardMobileTitle {
  font-size: 24px;
  font-family: "JetBrainsMono-Bold";
}
@media (max-width: 429px) {
  .purchaseCardMobileTitle {
    font-size: 18px;
  }
}

.purchaseStoreNameMobile {
  font-size: 18px;
  font-family: "JetBrainsMono-Regular";
  color: #836c7f;
}
@media (max-width: 429px) {
  .purchaseStoreNameMobile {
    font-size: 14px;
  }
}

.purchaseImageMobileLoading {
  width: 148px;
  height: 222px;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  cursor: pointer;
}

.purchaseTitleMobile {
  width: 210px;
  height: 32px;
}

.purchaseStoreMobile {
  width: 180px;
  height: 20px;
}

.purchaseReadButton {
  width: 80px;
  height: 42px;
  font-family: "JetBrainsMono-Bold";
  background-color: white;
  border: 1px solid #d2d2d2;
  font-size: 16px;
  color: #5d2f55;
  font-weight: 600;
  padding: 8px 20px;
}
.purchaseReadButton:hover {
  border: 1px solid black;
}

.purchaseListWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 40px 20px;
}

.pledgesListWrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin: 40px 20px;
  flex-wrap: wrap;
}

.readAndDownloadButtonsWeb {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
}

.purchasesWebTitleLoading {
  width: 400px;
  height: 30px;
}

.purchasesWebStoreLoading {
  width: 400px;
  height: 25px;
}

.pledgesMobileList {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 74px 0px 40px 0px;
  gap: 10px;
  padding: 10px 0;
}

.pledgePageMessage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.kickstarterTitleMobile {
  font-size: 14px;
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
}

.kickstarterTitleMobileUnderlined {
  font-size: 12px;
  font-family: "JetBrainsMono-Bold";
  color: #5d2f55;
  text-decoration: underline;
  margin: 10px;
}

/* Socials Container Styling */
.socials-container {
  padding: 20px 0;
}

.socials-description {
  margin-bottom: 20px;
}

.socials-description p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

.socials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

/* Social Link Styling */
.social-link {
  display: flex;
  width: 100%;
  height: 60px;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  text-decoration: none;
  color: rgb(131, 108, 127);
  transition: all 0.3s ease;
  padding: 8px;
  gap: 10px;
  img {
    width: 25px;
    height: 25px;
  }
}

.social-link:hover {
  background: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #333;
}

/* Social Icon Styling */
.social-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Social Label Styling */
.social-label {
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

/* Platform-specific colors on hover */
.social-link:hover .social-icon {
  filter: brightness(1.1);
}

/* Instagram specific styling */
.social-link[title*=Instagram]:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

/* Twitter/X specific styling */
.social-link[title*=Twitter]:hover,
.social-link[title*=X]:hover {
  background: #1da1f2;
  color: white;
}

/* YouTube specific styling */
.social-link[title*=YouTube]:hover {
  background: #ff0000;
  color: white;
}

/* GitHub specific styling */
.social-link[title*=GitHub]:hover {
  background: #333;
  color: white;
}

/* Bluesky specific styling */
.social-link[title*=Bluesky]:hover {
  background: #00a8e8;
  color: white;
}

/* Facebook specific styling */
.social-link[title*=Facebook]:hover {
  background: #1877f2;
  color: white;
}

/* Tumblr specific styling */
.social-link[title*=Tumblr]:hover {
  background: #001935;
  color: white;
}

/* Email specific styling */
.social-link[title*=Email]:hover {
  background: #34495e;
  color: white;
}

/* Additional content styling */
.socials-additional-content {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .socials-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .social-link {
    padding: 10px 14px;
    min-height: 50px;
  }
  .social-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }
  .social-label {
    font-size: 13px;
  }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .social-link {
    background: #836c7f;
    border: 1px solid #836c7f;
    color: #e2e8f0;
  }
  .social-link:hover {
    background: #4a5568;
    color: #e2e8f0;
  }
  .socials-additional-content {
    background: #836c7f;
    /* background: #2d3748; */
    color: #e2e8f0;
  }
}
html,
body {
  margin: 0;
  padding: 0;
}