.about-why-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  visibility: hidden;
}

.about-why-icon svg {
  transition: transform 0.4s ease, fill 0.4s ease;
  transform: rotate(0deg);
  fill: #333;
}

.about-why-wrapper:hover .about-why-content {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.about-why-wrapper:hover .about-why-icon svg {
  transform: rotate(-35deg);
}

.about-why-icon svg circle,
.about-why-icon svg path {
  transition: fill .6s ease;
}

.about-why-wrapper:hover .about-why-icon svg circle {
  fill: #000000;
}

.about-why-wrapper:hover .about-why-icon svg path {
  fill: #ffffff;
}

@media (max-width: 768px) {
  .about-why-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  .about-why-wrapper:hover .about-why-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
}