/* white you custom css code here. only css code will work */


/*------- Offer-item-wrap ---------------------------------------------
.offer-item-wrap {
    align-self: flex-end;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
}
.offer-item-wrap:hover {
    animation-name: bounce;
    animation-timing-function: ease;
}
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
*/

/* Container for the image and overlay */
.img-wrap {
  display: inline-block;
  perspective: 1000px; /* Set the perspective value to control the 3D depth */
}

/* Image style */
.img-wrap img {
  transition: transform 0.5s ease; /* Define the transition effect and duration for the 3D effect */
}

/* 3D tilt effect on hover */
/*.img-wrap:hover img {
  transform: rotateX(20deg) rotateY(20deg) rotateZ(20deg); /* Adjust the rotation values to control the tilt */
 /* transform: rotate3d(1, 1, 1, 45deg);
}*/
/************************************************************************************************/
.single-updated {
  transition: transform 0.3s;
}

.single-updated:hover {
  transform: scale(1.1);
}

/*------- Heart Pulse ---------------------------------------------*/

.right-image {
  transform: perspective(500px) rotateX(30deg) rotateY(30deg);
}

.right-image {
  animation:  pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
  }
}

/*------- Animation Box ---------------------------------------------*/
.box {
      border-radius: 20px;
      box-shadow:  0 0 0 #cccccc,
                   0 0 0 #ffffff,
                    10px 10px 10px #cccccc inset,
                    -10px -10px 10px #ffffff inset;
      animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
      /* animation-fill-mode: forwards; */
    }

    @keyframes anime {
      0% {
        width: 60px;
        height: 60px;
        box-shadow:  0 0 0 #cccccc,
                     0 0 0 #ffffff,
                      10px 10px 10px #cccccc inset,
                      -10px -10px 10px #ffffff inset;
      }
      25% {
        width: 60px;
        height: 60px;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      50% {
        width: 60px;
        height: 240px;
        background: #f8f8f8;
        box-shadow:  10px 10px 10px #cccccc,
                     10px 10px 10px #ffffff,
                     0 0 0 #cccccc inset,
                     0 0 0 #ffffff inset;
      }
      100% {
        width: 480px;
        height: 240px;
        background: #fafafa;
        box-shadow:  40px 40px 40px #cccccc,
                     0 0 0 #ffffff,
                     0 0 0 #cccccc inset,
                     2px 2px 2px #ffffff inset;
      }
      
 /**************** Header Health care right-image-wrap **********************************/     
.right-image-wrap{       
       /* animation: balance 2s infinite; */
  		animation: rotate 4s infinite linear;
}

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