/* Container styles */
.container {
    margin-top: 20px;
  }
  
  /* Row styles */
  .row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
  }
  
  /* Image and Content container styles */
  .content-container {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .img-responsive1{
    display: block;
    max-width: 400px;
     border-radius: 50%;
  }
  .img-circle {
    
    max-width: 210px;
    height: 210px; /* Ensure equal height */
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* Content styles */
  .content {
    padding: 20px;
  }
  
  h2 {
    font-size: 1.75rem;
    margin-bottom: 10px;
  }
  
  p {
    margin-bottom: 10px;
    
  }
  
  /* Vertical line separator with blinking effect */
  .vertical-line {
    width: 3px;
    height: 100%;
    background-color: black;
    animation: blink 1s infinite;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: 500px){
      width: 100%;
    }
  }
  
  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  
  /* Animation for left-to-right and right-to-left effect */
  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .animate-left-right .section-left {
    animation: slideInLeft 1s ease-in-out;
  }
  
  .animate-left-right .section-right {
    animation: slideInRight 1s ease-in-out;
  }
  
  .animate-right-left .section-left {
    animation: slideInRight 1s ease-in-out;
  }
  
  .animate-right-left .section-right {
    animation: slideInLeft 1s ease-in-out;
  }
  
  /* Final Image Alignment */
  .final-image {
    animation: slideInRight 1s ease-in-out;
  }
 


  /* Animation changes  */

  /* General Styles */
.img-circle {
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Fade-in Animation on Hover */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#img-community-sports:hover {
  animation: fadeIn 1s ease-in-out;
}

/* Slide-in from the Left on Hover */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#img-birthday-parties:hover {
  animation: slideInLeft 1s ease-out;
}

/* Zoom-In Animation on Hover */
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#img-anniversary:hover {
  animation: zoomIn 1s ease-out;
}

/* Bounce Animation on Hover */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

#img-baby-showers:hover {
  animation: bounce 1s ease-out;
}

/* Rotate Animation on Hover */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#img-housewarming:hover {
  animation: rotate 2s linear;
}

/* Blur to Clear Animation on Hover */
@keyframes blurToClear {
  from { filter: blur(5px); opacity: 0; }
  to { filter: blur(0); opacity: 1; }
}

#img-reunions:hover {
  animation: blurToClear 1.5s ease-out;
}

/* Flip Animation on Hover */
@keyframes flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

#img-community-gatherings:hover {
  animation: flip 1.5s ease-out;
}



/* Gated Community animations */
/* General Styles */
.img-circle {
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Fade-in Animation on Hover */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#img-festivals:hover {
  animation: fadeIn 1s ease-in-out;
}

/* Slide-in from the Left on Hover */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#img-community-sports:hover {
  animation: slideInLeft 1s ease-out;
}

/* Zoom-In Animation on Hover */
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#img-fitness-wellness:hover {
  animation: zoomIn 1s ease-out;
}

/* Bounce Animation on Hover */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

#img-event-coverage:hover {
  animation: bounce 1s ease-out;
}

/* Rotate Animation on Hover */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#img-kids-sports:hover {
  animation: rotate 2s linear;
}

/* Blur to Clear Animation on Hover */
@keyframes blurToClear {
  from { filter: blur(5px); opacity: 0; }
  to { filter: blur(0); opacity: 1; }
}

#img-family-events:hover {
  animation: blurToClear 1.5s ease-out;
}

/* Flip Animation on Hover */
@keyframes flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

#img-facility-management:hover {
  animation: flip 1s ease-out;
}