* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Kantumruy;
}
@font-face {
  font-family: Kantumruy;
  src: url(../font/Kantumruy_Pro/KantumruyPro-VariableFont_wght.ttf);
}
@font-face {
  font-family: Poppin;
  src: url(../font/Poppins/Poppins-Regular.ttf);
}

.navbar {
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
  backdrop-filter: blur(10px); /* Blur effect */
  height: 80px !important;
}

.active-style {
  background-color: rgb(255, 205, 77) !important;
  color: white !important;
  padding: 10px !important;
  border-radius: 50% !important;
}
.nav-link-hover:hover {
  background-color: rgb(255, 205, 77)!important;
  color: white !important;
  transition: all 0.5s;
}
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  padding: 10px !important;
  border-radius: 50% !important;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 3px rgb(255, 205, 77);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(
    center,
    ellipse,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 80%
  );
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  transition: all 1s;
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.navbar-brand img {
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hover-style{
  font-size: 1.5rem;
  transition: all 0.3s !important;
}
.hover-style:hover {
  scale: 1.3 !important;
  color: rgb(188, 135, 0) !important;
}
.nav-pills .nav-link {
  border-radius: 10px;
  transition: all 0.3s ease;
}
.position-fixed.bottom-0 {
  z-index: 1000; /* Ensure it's above other elements */
}
.card {
  backdrop-filter: blur(10px); /* Blur effect */
  border: none;

}
.p-set{
  padding-top: 8rem !important;
}
.font-change{
  font-style: italic;
}
.circle{
  border-radius: 20px !important;
}
::placeholder{
  font-size: 1rem;
  font-style: italic;
}
.style-form{
  background:none !important;
}
.style-form:focus{
  box-shadow: 0 2px 0px rgb(255, 183, 0) !important;
  transition: all 0.5s;
}
.search-icon:hover{
  color: rgb(255, 183, 0) !important;
  scale: 1.1 !important;
  transition: all 0.3s;
}
.fs-12{
  font-size: 10px;
  font-family:Poppin;
  letter-spacing: 4px;
}
.top-custom{
  top: 3rem;
}
.no-bg{
  background: none !important;
}
.btn-search-sm{
  color: rgb(255, 183, 0) !important;
  border: solid 2px rgb(255, 183, 0) !important;
  border-radius: 10px !important;
  transition: all 0.3s !important;
}
.btn-search-sm:hover{
  scale: 1.1 !important;
}
.circle-btn{
  border-radius: 10px !important;
  color: rgb(255, 183, 0) !important;
  font-size: 1.3rem !important;
  transition: all 0.3s !important;
}
.circle-btn:hover{
  opacity: 0.5 !important;
  border-radius: 10px !important;
  color: rgb(255, 183, 0) !important;
  font-size: 1.3rem !important;
}

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
.btn-warning{
  background-color: rgb(255, 193, 7) !important;
}
.hvr-ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-ripple-out:before {
  content: "";
  position: absolute;
  border: rgb(255, 193, 2) solid 5px;
  border-radius: 10px !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-out:hover:before,
.hvr-ripple-out:focus:before,
.hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}
.hvr-ripple-out2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-ripple-out2:before {
  content: "";
  position: absolute;
  border: rgb(255, 193, 7) solid 6px;
  border-radius: 50px !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-out2:hover:before,
.hvr-ripple-out2:focus:before,
.hvr-ripple-out2:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

#backToTop {
  opacity: 0.2;
  bottom: 30px;
  right: 30px;
  transition: all 0.5s;
}

#backToTop:hover{
  opacity: 1;
}

/* Ripple In */
@-webkit-keyframes hvr-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
@keyframes hvr-ripple-in {
  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }
}
.hvr-ripple-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.hvr-ripple-in:before {
  content: "";
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.hvr-ripple-in:hover:before,
.hvr-ripple-in:focus:before,
.hvr-ripple-in:active:before {
  -webkit-animation-name: hvr-ripple-in;
  animation-name: hvr-ripple-in;
}
.link-hover:hover{
  color: rgb(255, 199, 58) !important;
  transition: all 0.3s;
}
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.text2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.text4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.book-star{
  width: 500px;
  object-fit: cover;
}
.blur-bg{
  backdrop-filter: blur(10px);

}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  height:fit-content !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-shadow-3d{
  box-shadow: rgb(255, 183, 0, 0.2) 0px  4px 10px;
}
.border-warning-style{
  border: solid 2px rgb(255, 183, 0);

}
.hover-text:hover{
  color: rgb(255, 183, 0) !important;
  transition: all 0.3s;
}
.mt-7{
  margin-top: 7rem !important;
}

.mt-n3{
  margin-top: -3rem !important;
}



/*cart- hover style rare*/
.hover-active {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: all 0.3s;
}

.hover-active:hover{
  scale: 1.05;
}

.hover-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgb(255, 183, 0);
  transition: width 0.3s ease;
}

.hover-active:hover::after {
  width: 100%;
}

.card-hover-ef .hover-active ~ div {
  position: relative;
}
.card-hover-ef .hover-active ~ div::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgb(255, 183, 0);
  transition: width 0.3s ease;
}

/* Ensure transition applies */
.card-hover-ef .hover-active:hover ~ div::after {
  width: 100%;
}



/*laoder*/

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


.cube {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 2s infinite ease-in-out;
}

.cube .face {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgb(255, 193, 7);
  opacity: 0.8;
  border: 2px solid #fff;
  box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
  transition: all 0.3s ease-in-out;
}


.cube .front  { transform: rotateY(  0deg) translateZ(40px); }
.cube .back   { transform: rotateY(180deg) translateZ(40px); }
.cube .left   { transform: rotateY( -90deg) translateZ(40px); }
.cube .right  { transform: rotateY(  90deg) translateZ(40px); }
.cube .top    { transform: rotateX(  90deg) translateZ(40px); }
.cube .bottom { transform: rotateX( -90deg) translateZ(40px); }


@keyframes rotate {
  0% {
      transform: rotateX(0deg) rotateY(0deg);
      box-shadow: 0 0 10px 5px rgb(255, 193, 7,0.7);
  }
  50% {
      transform: rotateX(180deg) rotateY(180deg);
      box-shadow: 0 0 20px 10px rgb(255, 193, 7,0.9);
  }
  100% {
      transform: rotateX(360deg) rotateY(360deg);
      box-shadow: 0 0 10px 5px rgb(255, 193, 7,0.7);
  }
}


.loading-text {
  margin-top: 40px;
  font-size: 2rem;
  font-weight: 500;
  color: rgb(255, 193, 7);
}