:root {
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-duration: 1s;
}
.checked {
  color: orange;
}



@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.50deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

[data-animation] {
  opacity: 0;
  animation-timing-function: var(--animation-timing-function);
  animation-fill-mode: both;
  animation-duration: var(--animation-duration);
  will-change: transform, opacity;
}

.animations-disabled {
  &,
  [data-animation] {
    animation: none !important;
    opacity: 1 !important;
  }
}

.slideInUp {
  animation-name: slideInUp;
}
.slideInDown {
  animation-name: slideInDown;
}
.slideInLeft {
  animation-name: slideInleft;
}
.slideInRight {
  animation-name: slideInRight;
}


.fadeIn {
  animation-name: fadeIn;
}

.zoomIn {
  animation-name: zoomIn;
}
.zoomReverseIn {
  animation-name: zoomReverseIn;
}

.flipInY {
  animation-name: flipInY;
}
.flipOutY {
  animation-name: flipInY;
  animation-direction: reverse;
}

    .card {
   height: inherit;
      width: 100%;
      object-fit: cover;
	 
      height: 400px;
      width: 350px;
	  margin-left: 100px;
    }
	
    
@media (max-width: 600px) {
  .card{
	/* display: none; */
	margin-left: 100px;
	height: 300px;
      width: 300px;
  }
}
 @media (max-width: 900px) {
  .card{
	
	margin-left: 50px;
	height: 300px;
     width: 200px;
  }

}
    
.slider-thumb::before {
	position: absolute;
	content: "";
	
	width: 450px;
	height: 450px;
  background: transparent;
	background-image: url(assets/images/books1.jpg);
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
	will-change: border-radius, transform, opacity;
	animation: sliderShape 5s linear infinite;
	display: block;
	z-index: -1;
	-webkit-animation: sliderShape 5s linear infinite;
}
@keyframes sliderShape{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

/* Media Query for small to medium screens (tablets) */
@media (max-width: 1024px) {
 .slider-thumb::before {
    margin-left: -50px;
    width: 400px;  /* Smaller size for mobile */
    height: 400px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}

/* Media Query for small tablets and large phones (portrait mode) */
@media (max-width: 768px) {
  .logo
{
	width: 50%;
	height: 50px;
}

  .slider-thumb::before {
    margin-left: -50px;
    width: 350px;  /* Smaller size for mobile */
    height: 350px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}

/* Media Query for large smartphones (landscape mode) */
@media (max-width: 600px) {
 .slider-thumb::before {
    margin-left: -30px;
    width: 300px;  /* Smaller size for mobile */
    height: 300px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}



/* Media Query for large smartphones (landscape mode) */
@media (max-width: 480px) {
 .slider-thumb::before {
    margin-left: -10px;
    width: 300px;  /* Smaller size for mobile */
    height: 300px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}


/* Media Query for smartphones (portrait mode) */
@media (max-width: 420px) {
   .slider-thumb::before {
    margin-left: -40px;
    width: 300px;  /* Smaller size for mobile */
    height: 300px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}

/* Media Query for very small smartphones (portrait mode, e.g., old iPhones) */
@media (max-width: 360px) {
  .slider-thumb::before {
    margin-left: -40px;
    width: 250px;  /* Smaller size for mobile */
    height: 250px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}

/* Media Query for extra small screens (e.g., small old phones or very narrow screens) */
@media (max-width: 320px) {

  
   .slider-thumb::before {
    margin-left: -40px;
    width: 250px;  /* Smaller size for mobile */
    height: 250px;
    border-radius: 50% 50% 70% 70% / 50% 50% 70% 70%;  /* Adjusted for smaller screens */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);  /* Smaller shadow for mobile */
    animation: sliderShapeMobile 4s linear infinite;  /* Slightly faster animation on mobile */
  }

  @keyframes sliderShapeMobile {
    0%, 100% {
      border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    34% {
      border-radius: 60% 40% 50% 50% / 50% 40% 60% 60%;
      transform: translate3d(0, 3px, 0) rotateZ(0.01deg);
    }
    50% {
      transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }
    67% {
      border-radius: 70% 50% 50% 70% / 60% 60% 50% 50%;
      transform: translate3d(0, -2px, 0) rotateZ(0.01deg);
    }
  }
}


/* .poems1{
	 border: 1px solid #000000; width: 80rem; margin-left: 15rem; padding: 50px ; height: 50rem;  border-radius: 40px; 
									background-image: url(https://e1.pngegg.com/pngimages/1009/634/png-clipart-five-vintage-books.png);
									background-position: center;
									background-size: cover;
									background-repeat: no-repeat;
} */
/* Base Styles for Poems */
.poems1, .poems2, .poems3 {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 50px;
  height: auto;
  position: relative;
  flex: 1 1 calc(33.33% - 30px); /* Flex items in 3 columns */
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
  color: #ffffff;
  z-index: 0; /* Ensure it's above the pseudo background */
  overflow: hidden;
  margin-bottom: 20px; /* Spacing between poems */
}

/* Add Background Image for Poems */
.poems1::before, .poems2::before, .poems3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  border-radius: 8px;
  z-index: -1;
  filter: blur(0px);
}

/* Overlay (Darkens the background image) */
.poems1::after, .poems2::after, .poems3::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.651); /* Dark overlay */
  z-index: -1;
  border-radius: 8px;
}

/* Specific Background Image URLs */
.poems1::before {
  background-image: url("assets/images/peom2.jpg");
}

.poems2::before {
  background-image: url("assets/images/peom1.jpg");
}

.poems3::before {
  background-image: url("assets/images/peom2.jpg");
}

/* Responsive Styles - Media Queries */
@media (max-width: 1200px) {
  .poems1, .poems2, .poems3 {
    flex: 1 1 calc(50% - 30px); /* 2 columns layout on large tablets/desktop */
  }
}

@media (max-width: 768px) {
  .poems1, .poems2, .poems3 {
    flex: 1 1 100%; /* Full width layout on medium tablets and below */
    padding: 20px;
  }

 
}

@media (max-width: 480px) {
  .poems1, .poems2, .poems3 {
    padding: 15px;
    font-size: 1.05rem; /* Smaller font size for smaller screens */
  }

 
}