/* CSS Variables */
        :root {
            --electric-border-color: #ff6000 ; /* Deep Sky Blue */
            --electric-light-color: oklch(from var(--electric-border-color) l c h);
            --gradient-color: oklch(
            from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4
            );
            --color-neutral-900: oklch(0.185 0 0);
        }

        body{
          background-color: #f8f8f8;
        }
    

    .section-books {
     content: "";
      display: block;
      position: relative;
      bottom: 0;
      left: 0;
      /* width: 100%; */
    color: #fff;
        background: linear-gradient(
        to right,
        #000000,  /* Black */
        #ffa559,  /* Soft Orange */
        #ff6000   /* Bright Orange */
      );
       text-align: center;
      padding: 70px 10px 70px;
      /* clip-path: ellipse(75% 100% at 50% 0%); */
    }

    .section-books h2 {
      font-size: 48px;
      font-weight: normal;
      margin: 0;
      letter-spacing: 2px;
    }

    


     .featured-section {
      max-width: 800px;
      margin: 100px auto;
      text-align: center;
      padding: 0 20px;
    }

    .section-label {
      color: #34505C;
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 1px;
      font-size: 16px;
      margin-bottom: 10px;
    }

    .series-title {
      font-size: 42px;
      font-weight: normal;
      margin: 10px 0 20px;
      font-variant: small-caps;
    }

    .series-description {
      font-size: 18px;
      line-height: 1.6;
      color: #333;
      max-width: 700px;
      margin: 0 auto;
    }

    @media (max-width: 600px) {
      .series-title {
        font-size: 32px;
      }

      .series-description {
        font-size: 16px;
      }
    }

:root {
  --color-neutral-900: #0d0d0d;
  --electric-border-color: #ffa559;
  --electric-light-color: #ff6000;
}

.mu-book-overview-contents {
  width: 100%;
  margin-top: 70px;
  position: relative;
  /* padding: 100px 0; */
  /* background: linear-gradient(to right, #000000, #ffa559, #ff6000); */
  overflow: hidden;
}
.logo1
{
	width: 30%;
	height: 50px;
}

/* .mu-book-overview-contents::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: white;
  border-top-left-radius: 100% 40px;
  border-top-right-radius: 100% 40px;
  transform: translateY(50%);
  z-index: 1;
} */

.mu-book-flexs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.card-container {
  position: relative;
}

.inner-container {
  position: relative;
  width: 350px;
  height: 500px;
}

.main-card {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
}

/* Blurred background image */
.main-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("assets/images/Mock 2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2px); /* ✅ Apply blur */
  opacity: 1; /* Keep fully visible unless you want to fade it */
  border-radius: 24px;
  z-index: -2;
}

/* Semi-transparent black overlay */
.main-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* ✅ 50% black overlay */
  border-radius: 24px;
  z-index: -1;
}


.main-card2 {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
}

/* Blurred background image */
.main-card2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("assets/images/Mock\ 3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2px); /* ✅ Apply blur */
  opacity: 1; /* Keep fully visible unless you want to fade it */
  border-radius: 24px;
  z-index: -2;
}

/* Semi-transparent black overlay */
.main-card2::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* ✅ 50% black overlay */
  border-radius: 24px;
  z-index: -1;
}



.main-card3 {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
}

/* Blurred background image */
.main-card3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("assets/images/Mock\ 4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2px); /* ✅ Apply blur */
  opacity: 1; /* Keep fully visible unless you want to fade it */
  border-radius: 24px;
  z-index: -2;
}

/* Semi-transparent black overlay */
.main-card3::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* ✅ 50% black overlay */
  border-radius: 24px;
  z-index: -1;
}





.border-effect-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  filter: url(#turbulent-displace);
  pointer-events: none;
}

.electric-border,
.glow-layer-1,
.glow-layer-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 24px;
}

.electric-border {
  border: 3px solid var(--electric-border-color);
}

.glow-layer-1 {
  border: 2px solid var(--electric-border-color);
  filter: blur(2px);
  opacity: 0.7;
}

.glow-layer-2 {
  border: 2px solid var(--electric-border-color);
  filter: blur(4px);
  opacity: 0.5;
}

.background-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  filter: blur(32px);
  transform: scale(1.1);
  opacity: 0.4;
  z-index: -1;
  background: linear-gradient(-30deg, var(--electric-light-color), transparent);
}

.content-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 30%, rgba(10, 10, 10, 0.98) 100%);
  z-index: 2;
}

.content-top,
.content-bottom {
  display: flex;
  flex-direction: column;
  padding: 48px;
}

.content-top {
  /* padding-bottom: 16px; */
  height: 100%;
}

.content-bottom {
  padding-top: 0.5px;
}

.scrollbar-glass {
  background: radial-gradient(47.2% 50% at 50.39% 88.37%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.04);
  position: relative;
  transition: background 0.3s ease;
  border-radius: 14px;
  width: fit-content;
  height: fit-content;
  padding: 8px 16px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.scrollbar-glass:hover {
  background: radial-gradient(47.2% 50% at 50.39% 88.37%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.08);
}

.scrollbar-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.48) 16.73%, rgba(255, 255, 255, 0.08) 30.2%, rgba(255, 255, 255, 0.08) 68.2%, rgba(255, 255, 255, 0.6) 81.89%);
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.title {
  font-family: Georgia, serif; 
  color: #000000;
  font-size: 28px;
  font-weight: 700;
  /* margin-top: auto; */
  text-shadow: 0px 2px 12px #ffa559;
}

.description {
  font-family: Georgia, serif; 
  font-weight: 500;
   margin: auto;
  opacity: 0.8;
  font-size: 16px;
  color: #131212;
  text-shadow: 0px 1px 8px #ff6000;
  
}

.divider {
  margin-top: auto;
  border: none;
  height: 1px;
  background-color: currentColor;
  opacity: 0.1;
  mask-image: linear-gradient(to right, transparent, black, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
}





.playbtn11 {
  position: relative;
  display: inline-block;
  padding: 25px 20px;
  margin: 40px 0;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  font-weight: 600;
  letter-spacing: 4px;
  overflow: hidden;
}
.playbtn11:hover {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 5px #ffffff, 0 0 25px #fff, 0 0 50px #fff, 0 0 200px #fff;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

.playbtn11 span {
  position: absolute;
  display: block;
}

.playbtn11 span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, transparent, #ff871c);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.playbtn11 span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ff871c);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.playbtn11 span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(270deg, transparent, #ff871c);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.playbtn11 span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #ff871c);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

.custom-footer {
  background: linear-gradient(to right, #000000, #ffa559, #ff6000);
  color: #fff;
  transition: color 0.3s ease;
  padding: 30px 30px;
  
}


@media (max-width: 600px) {
  .svg-container {
 display: none;
}
}