@font-face {
  font-family: "logo";
  src: url("../fonts/1776_Independence\ W00\ Bold.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "aGaramondPro";
  src: url("../fonts/AGaramondPro-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "appleSDGothicNeo";
  src: url("../fonts/AppleSDGothicNeo.ttc") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "metropolisThin";
  src: url("../fonts/Metropolis-Thin.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "hindmaduraiMedium";
  src: url("../fonts/HindMadurai-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "hindmaduraiLight";
  src: url("../fonts/HindMadurai-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "glittenRegular";
  src: url("../fonts/Glitten-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "devanagariSangam";
  src: url("../fonts/Cherston\ Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "bookAntiqua";
  src: url("../fonts/Book\ Antiqua\ Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.font-quicksand {
  font-family: "Quicksand", serif;
}

.font-bookinfo {
  font-family: "bookAntiqua", serif;
}

.font-title {
  font-family: "devanagariSangam", sans-serif;
}

.font-logo {
  font-family: "glittenRegular", serif;
}

.font-text {
  font-family: "aGaramondPro", serif;
}

.font-authorname {
  font-family: "hindmaduraiLight", sans-serif;
}

.font-searchBar {
  font-family: "hindmaduraiLight", sans-serif;
}

.font-button {
  font-family: "hindmaduraiMedium", sans-serif;
}

.font-cover-title {
  font-family: "hindmaduraiMedium", sans-serif;
}

.font-cover-author {
  font-family: "hindmaduraiLight", sans-serif;
}

.bookshelf {
  margin: 0px;
  margin-bottom: 0px;
}

.bookshelf .book {
  width: 140px;
  height: auto;
  display: inline-block;
  margin: 0 0px 0px;
  position: relative;
  vertical-align: top;
  transition: all ease-in-out 0.2s;
  overflow: visible; /* Ensure shadow isn't clipped */
}

.bookshelf .book::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.bookshelf .book:hover {
  box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}
.bookshelf .book .meta {
  position: absolute;
  bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 0.6) 0%,
    rgba(2, 0, 36, 0) 100%
  );
  color: #ffffff;
}
.bookshelf .book .meta .title {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.bookshelf .book .meta .author {
  font-size: 12px;
  opacity: 0.6;
}
.bookshelf .book .link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.05) 0.75%,
    rgba(255, 255, 255, 0.5) 1%,
    rgba(255, 255, 255, 0.6) 1.3%,
    rgba(255, 255, 255, 0.5) 1.4%,
    rgba(255, 255, 255, 0.3) 1.5%,
    rgba(255, 255, 255, 0.3) 2.4%,
    rgba(0, 0, 0, 0.05) 2.7%,
    rgba(0, 0, 0, 0.05) 3.5%,
    rgba(255, 255, 255, 0.3) 4%,
    rgba(255, 255, 255, 0.3) 4.5%,
    rgba(244, 244, 244, 0.1) 5.4%,
    rgba(244, 244, 244, 0.1) 99%,
    rgba(144, 144, 144, 0.2) 100%
  );
  box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 2);
}
.bookshelf .book .cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.bookshelf .book .cover img {
  min-width: 100%;
  min-height: 100%;
}

.bookolor-1 {
  background-color: #ffd8e1;
}
.bookolor-2 {
  background-color: #ff89a6;
}
.bookolor-3 {
  background-color: #ff003f;
}
.bookolor-4 {
  color: #890022;
}
.bookolor-5 {
  background-color: #3b000f;
}

.bookolor-popup-1:hover {
  background-color: #3b000f;
}

.fading-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px;
  background: white;
  z-index: 50;
  backdrop-filter: blur(10px); /* Ensures a blur effect */
  -webkit-backdrop-filter: blur(10px);

  /* Fading effect at the bottom */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 100%,
    rgba(0, 0, 0, 0)
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 98%,
    rgba(0, 0, 0, 0)
  );
}

.sticky-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white; /* Match your header background */
  z-index: 60; /* Higher than the header */
  padding: 10px; /* Adjust as needed */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.hidden-bookologia {
  display: none;
}

.fading-header {
  transition: top 0.3s ease; /* smooth transition */
}
