.contentBack {
	background-color: #eaf0ff;
}

.contentBox {
	border: 1px #d9e2fb solid;
	border-radius: 20px;
	padding: 15px;
	box-shadow: 0px 0px 13px #b3c7e1;
}

.image-container {
  position: relative;
  display: inline-block;
	margin: 40px;
}

.image-container::before,
.image-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #73A8E7; /* Color of the squares */
}

.image-container::before {
  top: -40px;
  left: -40px;
	background-color: #e0f2ff;
}

.image-container::after {
  bottom: -40px;
  right: -40px;
	background-color: #b2cfed;
}

.styled-image {
  display: block;
  position: relative;
  z-index: 1; /* Ensures the image stays on top */
	width: 100%; /* Ensures responsiveness */
  max-width: 600px; /* Adjust as needed */
	border-radius: 50px 0px 50px 0px;
}

@keyframes popEffect {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.aniPop {
  display: inline-block; /* Ensures scaling works correctly */
  opacity: 0; /* Initially hidden */
  transform: scale(0.8);
  transition: opacity 0.3s ease-out, transform 0.5s ease-out;
}

.aniPop.active {
  animation: popEffect 0.4s ease-out forwards;
	animation-delay: 0.5s; /* <-- Add delay before animation starts */
}

@keyframes aniTwist {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-10deg);
    opacity: 1;
  }
  60% {
    transform: rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.aniTwist {
  display: inline-block;
  opacity: 0; /* Start hidden */
  transform: rotate(0deg) scale(0.9); /* Start slightly smaller */
  transition: opacity 0.4s ease-out, transform 1s ease-in-out;
}

.aniTwist.active {
  opacity: 0;
  animation: aniTwist 1s ease-in-out forwards;
	animation-delay: 0.3s; /* <-- Add delay before animation starts */
}

.aniTwistH:hover {
  animation: aniTwistH 0.8s ease-in-out forwards;
}