.hero-image {
   flex: 1;
   position: relative;
   width: 95%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .doctor-circle {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
 }

 .doctor-img {
   object-position: center;
   width: 80%;
   margin-top: 80px;
 }

 .whatsapp-header,
 .hero-service-card {
   position: absolute;
   background: white;
   padding: 10px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 5px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   font-size: 13px;
   font-weight: 600;
   color: #000;
   white-space: nowrap;
   z-index: 3;
   opacity: 0;
   height: 38px;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .whatsapp-icon {
   transition: all 0.3s ease;
 }

 .whatsapp-header {
   top: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   animation: headerSlideIn 0.8s ease-out 0.5s forwards;
 }

 .hero-service-card {
   transform: scale(0.8) translateY(20px);
   width: 215px;
 }

 .hero-service-card.animate-in {
   animation: cardSlideIn 0.8s ease-out forwards;
 }

 .hero-service-card:hover {
   transform: translateY(-5px) scale(1.02);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
 }

 .hero-service-icon svg {
   width: 24px;
   height: 24px;
 }

 /* Card positioning */
 .card-home-care {
   top: 110px;
   left: -10px;
   animation-delay: 1s;
 }

 .card-home-visit {
   top: 110px;
   right: -10px;
   animation-delay: 1.2s;
 }

 .card-rewards {
   left: -65px;
   top: 60%;
   transform: translateY(-50%) scale(0.8) translateY(20px);
   animation-delay: 1.4s;
 }

 .card-consultation {
   right: -65px;
   top: 60%;
   transform: translateY(-50%) scale(0.8) translateY(20px);
   animation-delay: 1.6s;
 }

 .card-emergency {
   bottom: 32px;
   left: -50px;
   animation-delay: 1.8s;
 }

 .card-ambulance {
   bottom: 32px;
   right: -50px;
   animation-delay: 2s;
 }

 /* Animations */
 @keyframes cardSlideIn {
   0% {
     opacity: 0;
     transform: scale(0.8) translateY(20px);
   }

   100% {
     opacity: 1;
     transform: scale(1) translateY(0);
   }
 }

 @keyframes headerSlideIn {
   0% {
     opacity: 0;
     transform: translateX(-50%) translateY(-30px);
   }

   100% {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
   }
 }

 @keyframes dotsSlideIn {
   0% {
     opacity: 0;
     transform: translateX(-50%) translateY(20px);
   }

   100% {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
   }
 }

 /* Special animation for side cards */
 .card-rewards.animate-in,
 .card-consultation.animate-in {
   animation: sideCardSlideIn 0.8s ease-out forwards;
 }

 @keyframes sideCardSlideIn {
   0% {
     opacity: 0;
     transform: translateY(-50%) scale(0.8) translateX(20px);
   }

   100% {
     opacity: 1;
     transform: translateY(-50%) scale(1) translateX(0);
   }
 }

 /* Responsive design */
 @media (max-width: 1024px) {
   .hero-container {
     flex-direction: column;
     gap: 40px;
     text-align: center;
   }

   .hero-image-section {
     height: 500px;
   }

   .doctor-circle {
     width: 280px;
     height: 280px;
   }

   .doctor-img {
     width: 240px;
     height: 240px;
   }
 }

 @media (max-width: 768px) {
   .doctor-circle {
     width: 240px;
     height: 240px;
   }


   .hero-service-icon svg,
   .whatsapp-header svg {
     width: 18px;
     height: 18px;
   }

   .doctor-img {
     width: 160px;
     height: 160px;
   }

   .card-consultation {
     right: -20px;
     top: 67%;
   }

   .card-rewards {
     left: -15px;
     top: 67%;
   }

   .card-ambulance {
     bottom: 5px;
     right: -15px;
   }

   .card-emergency {
     bottom: 5px;
     left: -15px;
   }

   .card-home-care {
     top: 90px;
     left: 0px;
   }

   .card-home-visit {

     top: 90px;
     right: 0px;
   }

   .whatsapp-header,
   .hero-service-card {
     width: 140px;
     height: 30px;
     font-size: 8px;
     padding: 5px;

   }
   .whatsapp-header{
    width: 160px !important;
   }

 }