.slick-slideshow {
    position: relative;
    overflow: hidden; /* Hide overflowing slides */
  }
  
  .slider-container {
    display: flex;
    transition: transform 1s ease-in-out;
    transform: translateX(calc(-100% * var(--current-slide)));
  }
  
  .slide {
    flex: 0 0 100%; /* Each slide takes 100% of the container width */
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .slide.active {
    opacity: 1;
  }
  
  .slide.inactive {
    opacity: 0;
  }
  

  @keyframes pulse {
    0% {
      opacity: 0.7;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.7;
    }
  }
  
  .placeholder-glow .placeholder {
    animation: pulse 1.5s infinite ease-in-out;
  }
  

/* play button */
/* Play Button Styles */
.play-buttonn {
  font-size: 50px;
  color: #234664;
  overflow: hidden;
 background-color: gray;
 
}


.play-buttonn::before {
  position: absolute;
  margin: 0;
  top: 43%;
  left: 44%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  padding: 10px;
  padding-left: 13px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  animation: rotate-and-pause 6s ease-in-out infinite;
}

/* Wave Animation */
.play-buttonn::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  background: rgba(247, 247, 247, 0.155); /* Semi-transparent white */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: wave 1.5s infinite;
  pointer-events: none; /* Ensure the animation doesn’t interfere with clicks */
  
}


.slick-slide img {
  display: block;
  height: 100%;
}


.site-header.section-padding {
  padding-top: 1rem;
  padding-bottom: 1rem;
}




@media only screen and (max-width: 600px) {
  
  .slick-slideshow .slick-dots {
    top: 81%;
  }


  .slick-slide img {
    display: block;
    height: 462px;
  }



  .play-buttonn::before {
    top: 41%;
    left: 41%;
    padding-left: 10px;
    
  }
  
  /* Wave Animation */
  .play-buttonn::after {
    
    width: 300px;
    height: 300px;
    
  }



}





@keyframes wave {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes rotate-and-pause {
  0% {
    transform: rotate(0deg);
  }
  16.67% {
    transform: rotate(360deg); /* Complete rotation in 1 second */
  }
  100% {
    transform: rotate(360deg); /* Maintain position for 5 seconds */
  }
}



/* styles/globals.css */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d; /* You can customize the color */
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

/* Add other customizations as needed */


/* Add this to your CSS */
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}