@keyframes description-reveal {
  0% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
  32% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
  35% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  97% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  100% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
}
@keyframes reveal {
  0% {
    max-height: 40.63rem;
  }
  32% {
    max-height: 40.63rem;
  }
  35% {
    max-height: 13rem;
  }
  97% {
    max-height: 13rem;
  }
  100% {
    max-height: 40.63rem;
  }
}
@keyframes border-reveal {
  0% {
    width: 0%;
    transform: scaleX(1);
  }
  /* 1% { width: 15%; transform: scaleX(1); }
  29% { width: 15%; transform: scaleX(1); } */
  30% {
    width: calc(100% + 2.25rem);
    transform: scaleX(1);
  }
  31% {
    width: calc(100% + 2.25rem);
    transform: scaleX(1);
  }
  33% {
    width: 0;
    transform: scaleX(0);
  }
  100% {
    width: 0;
    transform: scaleX(1);
  }
}
@keyframes description-reveal-1 {
  0% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  32% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  35% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
  65% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
  68% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  100% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
}
@keyframes reveal-1 {
  0% {
    max-height: 13rem;
  }
  32% {
    max-height: 13rem;
  }
  35% {
    max-height: 40.63rem;
  }
  65% {
    max-height: 40.63rem;
  }
  68% {
    max-height: 13rem;
  }
  100% {
    max-height: 13rem;
  }
}
@keyframes border-reveal-1 {
  0% {
    width: 0;
    transform: scaleX(0);
  }
  35% {
    width: 0%;
    transform: scaleX(1);
  }
  /* 36% { width: 15%; transform: scaleX(1); }
  62% { width: 15%; transform: scaleX(1); } */
  63% {
    width: calc(100% + 2.25rem);
    transform: scaleX(1);
  }
  64% {
    width: calc(100% + 2.25rem);
    transform: scaleX(1);
  }
  65% {
    width: 0;
    transform: scaleX(0);
  }
  100% {
    width: 0;
    transform: scaleX(0);
  }
}
@keyframes description-reveal-2 {
  0% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  65% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
  68% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
  97% {
    max-height: 20rem;
    opacity: 1;
    overflow: visible;
  }
  100% {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
}
@keyframes reveal-2 {
  0% {
    max-height: 13rem;
  }
  65% {
    max-height: 13rem;
  }
  68% {
    max-height: 40.63rem;
  }
  97% {
    max-height: 40.63rem;
  }
  100% {
    max-height: 13rem;
  }
}
@keyframes border-reveal-2 {
  0% {
    width: 0;
    transform: scaleX(0);
  }
  65% {
    width: 0;
    transform: scaleX(0);
  }
  68% {
    width: 0%;
    transform: scaleX(1);
  }
  /* 69% { width: 15%; transform: scaleX(1); }
  97% { width: 15%; transform: scaleX(1); } */
  98% {
    width: calc(100% + 2.25rem);
    transform: scaleX(1);
  }
  99% {
    width: calc(100% + 2.25rem);
    transform: scaleX(1);
  }
  100% {
    width: 0;
    transform: scaleX(0);
  }
}
@keyframes icon {
  0% {
    transform: scale(1);
  }
  0.001% {
    transform: scale(0);
  }
  33% {
    transform: scale(0);
  }
  33.001% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icon-1 {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1);
  }
  33.001% {
    transform: scale(0);
  }
  67% {
    transform: scale(0);
  }
  67.001% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icon-2 {
  0% {
    transform: scale(1);
  }
  67% {
    transform: scale(1);
  }
  67.001% {
    transform: scale(0);
  }
  99.999% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icon-hover {
  0% {
    transform: scale(0);
  }
  0.001% {
    transform: scale(1);
  }
  33% {
    transform: scale(1);
  }
  33.001% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes icon-hover-1 {
  0% {
    transform: scale(0);
  }
  33% {
    transform: scale(0);
  }
  33.001% {
    transform: scale(1);
  }
  67% {
    transform: scale(1);
  }
  67.001% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes icon-hover-2 {
  0% {
    transform: scale(0);
  }
  67% {
    transform: scale(0);
  }
  67.001% {
    transform: scale(1);
  }
  99.999% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
.paragraph--type--collapsable-wrapper {
  border: 0.5px solid;
  border-image: linear-gradient(90deg, rgba(123, 97, 255, 0.3), rgb(255, 111, 183)) 1;
}
.paragraph--type--collapsable-wrapper .collapsible-item {
  padding: 1.5rem;
  padding-right: 4.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 0.5px solid;
  border-image: linear-gradient(90deg, rgba(123, 97, 255, 0.3), rgb(255, 111, 183)) 1;
}
.paragraph--type--collapsable-wrapper .collapsible-item .icon {
  width: 17%;
  position: relative;
}
.paragraph--type--collapsable-wrapper .collapsible-item .icon img {
  width: stretch;
  object-fit: fill;
}
.paragraph--type--collapsable-wrapper .collapsible-item .icon .card-style-2-image-hover {
  transform: scaleX(0);
  position: absolute;
  top: 0 !important;
}
.paragraph--type--collapsable-wrapper .collapsible-item .title {
  margin-block-end: 0;
  margin-block-start: 0;
  color: #1540DD;
}
.paragraph--type--collapsable-wrapper .collapsible-item .description {
  color: #605F5F;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease 0.3s;
  opacity: 0;
}
.paragraph--type--collapsable-wrapper .collapsible-item .border-bottom-hover {
  height: 0.5rem;
  background-color: #1540DD;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  position: relative;
  top: 1.5rem;
  left: -1.5rem;
}

@media (min-width: 769px) {
  .paragraph--type--collapsable-wrapper {
    width: 23.375rem;
  }
}
@media (min-width: 1025px) {
  .paragraph--type--collapsable-wrapper .collapsible-item {
    max-height: 13rem;
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .paragraph--type--collapsable-wrapper .collapsible-item .icon .card-style-2-image-hover {
    transform: scale(0);
  }
  .paragraph--type--collapsable-wrapper .collapsible-item:nth-child(1) {
    max-height: 40.3rem;
  }
  .paragraph--type--collapsable-wrapper .collapsible-item:nth-child(1) .description {
    max-height: 20rem;
    opacity: 1;
  }
  .paragraph--type--collapsable-wrapper .collapsible-item:nth-child(1) .icon .card-style-2-image-hover {
    transform: scale(1);
  }
  .paragraph--type--collapsable-wrapper .collapsible-item:nth-child(1) .icon .card-style-2-image {
    transform: scale(0);
  }
  .paragraph--type--collapsable-wrapper .collapsible-item:nth-child(1) .border-bottom-hover {
    width: 0;
    transform: scaleX(1);
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(1) {
    animation: reveal 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(1) .description {
    animation: description-reveal 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(1) .icon .card-style-2-image-hover {
    animation: icon-hover 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(1) .icon .card-style-2-image {
    animation: icon 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(1) .border-bottom-hover {
    animation: border-reveal 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(2) {
    animation: reveal-1 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(2) .description {
    animation: description-reveal-1 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(2) .icon .card-style-2-image-hover {
    animation: icon-hover-1 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(2) .icon .card-style-2-image {
    animation: icon-1 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(2) .border-bottom-hover {
    animation: border-reveal-1 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(3) {
    animation: reveal-2 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(3) .description {
    animation: description-reveal-2 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(3) .icon .card-style-2-image-hover {
    animation: icon-hover-2 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(3) .icon .card-style-2-image {
    animation: icon-2 9s infinite;
  }
  .paragraph--type--collapsable-wrapper:hover .collapsible-item:nth-child(3) .border-bottom-hover {
    animation: border-reveal-2 9s infinite;
  }
}

/*# sourceMappingURL=clickable-collapsible-card.css.map */