/* FONT */
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

 /* DEFAULTS */
 .sliderbody {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 50vh;
   margin: 0;

   font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
 }

 .latest {
  justify-content: center;
  align-items: center;
 
  padding-top: 60px; /* Adjust the value as needed */
}

 .ch, .chp {
  background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
  padding: 10px; /* Add some padding for better spacing */
  border-radius: 5px; /* Rounded corners */
  color: white; /* Ensure text is white for contrast */
  text-shadow: none; /* Remove text shadow for cleaner look */
}
.spanfontsize {
  font-size: 0.8rem; /* Change to your desired font size */
  color: white; /* Optional: Set the color */
  font-weight: lighter; /* Change this to 'normal', 'bold', 'lighter', or a numeric value (100-900) */
}



.ch {
  position: absolute;
  top: 80%; /* Adjust as needed */
  left: 4%;
  right: 4%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 5px;
  color: white;
}




 /* CONTAINER */
 .c {
   min-width: 90%;
   max-width: 500px;
   height: 500px;
   border-radius: 12px;
   padding: 20px;
   padding-bottom: 40px;
   box-shadow: 0 8px 48px 2px hsla(10 6% 15% / .4);
   display: flex;
   align-items: flex-end;
   justify-content: center;
   position: relative;
   overflow: hidden;
   background: hsl(0 0% 90%);
   box-sizing: border-box;
 }

 /* SLIDES */
 .ci {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform-origin: left 50%;
   background: inherit;
   z-index: var(--z);
   transition: .8s ease-out;
 }

 .ci img {
   -moz-user-select: none;
   user-select: none;
   width: 100%;
   height: 100%;
  
 }

 

 /* RADIO BUTTONS */
 input {
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
   z-index: -10;
 }

 label {
   width: 10%;
   height: 10px;
   margin-right: 4px;
   border-radius: 20px;
   background: hsla(0 0% 90% / .3);
   cursor: pointer;
   position: relative;
   z-index: 10;
 }

 label:last-child {
   margin-right: 0;
 }

 input:checked+label {
   background: linear-gradient(to right,
     hsla(var(--hue) 80% 70% / .7),
     hsla(calc(var(--hue) + 30) 80% 50% / .7));
 }

 input:not(:checked)+label+.ci {
   transform: translateX(-100%);
   opacity: 0;
 }

 input:checked+label+.ci~.ci {
   transform: translateX(100%);
 }

 input:not(:checked)+label+.ci {
   transition: 0;
 }

 /* MEDIA QUERIES */
 @media (max-width: 768px) {
   .c {
     min-width: 100%;
     height: 350px;
     padding: 10px;
   }

   .ch {
     font-size: 1.5rem;
   }

   h1 {
     left: -80px;
     font-size: 1rem;
   }
 }

 @media (max-width: 480px) {
   .c {
     height: 250px;
     padding: 5px;
   }

   .ch {
     font-size: 1.2rem;
   }

   h1 {
     left: -60px;
     font-size: 0.8rem;
   }

   label {
     width: 15%;
   }
 }

 @media (max-width: 768px) { /* Adjust the max-width as needed */
  .ci .spanfontsize {
      display: none; /* Hides the span on smaller screens */
  }
}