/* WhatsApp Floating Button Container */
.whatsapp-container {
  position: fixed;
  bottom: 20px; /* Add some space from the bottom */
  left: 10px; /* Add some space from the left */
  display: flex;
  align-items: center;
  z-index: 99999; /* Ensure it's above other elements */
  pointer-events: none; /* Prevent the container from blocking footer links */
}

/* WhatsApp Button Styling */
.whatsapp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366; /* WhatsApp green */
  color: #fff;
  text-decoration: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-right: 5px; /* Space between button and text */
  pointer-events: auto; /* Make the button clickable */
}

/* Hover Effect */
.whatsapp-button:hover {
  background-color: #0e2994; /* Blue color on hover */
  transform: scale(1.1); /* Slight zoom-in on hover */
}

/* WhatsApp Icon */
.whatsapp-button img {
  width: 20px;
  height: 20px;
}

/* WhatsApp Text Styling */
.whatsapp-text {
  font-size: 14px;
  font-weight: bold;
  color: #25d366;
  pointer-events: auto; /* Make the text clickable */
}

/* Shaking and Spinning Animation */
@keyframes shake-spin {
  0%, 100% {
    transform: translateX(0) rotate(0deg); /* No shake or rotation */
  }
  25% {
    transform: translateX(-5px) rotate(10deg); /* Shake and rotate 10 degrees */
  }
  50% {
    transform: translateX(5px) rotate(-10deg); /* Shake and rotate -10 degrees */
  }
  75% {
    transform: translateX(-5px) rotate(10deg); /* Shake and rotate 10 degrees */
  }
}

.shaking {
  animation: shake-spin 2s ease-in-out; /* 2 seconds shake-spin */
}
.post-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


/* Container styling */
.typed {
font-family: Arial, sans-serif;
font-size: 15px;
color: white;
/* background-color: white;  */
display: inline-block;
position: relative;
padding-bottom: 5px; /* Space for underline */
}

/* Red underline effect */
.typed::after {
content: '';
position: absolute;
bottom: 0; /* Align at the bottom */
left: 0;
width: 100%;
height: 3px; /* Thickness of the underline */
background-color: red; /* Red underline color */
}

/* Cursor effect */
.cursor {
display: inline-block;
width: 3px;
height: 24px;
background-color: red;
margin-left: 3px;
animation: blink 0.7s infinite;
}

/* Blinking cursor animation */
@keyframes blink {
50% {
    opacity: 0;
}
}
/* Container for the entire slideshow setup */
.slideshow-wrapper {
    width: 300px; /* Width for images */
    height: 300px; /* Height for images */
    margin: auto;
    position: relative;
    background-color: #1E90FF; /* Blue background */
    border: 2px solid #0056b3; /* Dark blue border */
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Slide (Image) */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.8s ease-in-out;
}

/* Image */
.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 5px;
}