.bg-animated-gradiant {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.btn.bg-animated-gradiant:hover {
  background: #e73c7e;
  color: #fff;
  transition-timing-function: ease;
}

.text-animated-gradiant {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 100% 100%;
  animation: gradient 5s ease infinite;

  background-clip: text;
  -webkit-background-clip: text;
}
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}
.letter:before,
.letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}

/* Default styles */
.card-response {
  border-top: 2px solid #000000;
}
.card-response .badge {
  background-color: #000000;
  color: #ffffff;
}

/* Twitter styles */
.twitter {
  border-top: 2px solid #1da1f2;
}
/* .twitter .text::after {
  content: "Here is a description of Twitter.";
} */
.twitter .badge {
  background-color: #1da1f2;
  color: #ffffff;
}

/* Facebook */
.facebook {
  border-top: 2px solid #1877f2;
}
/* .facebook .text::after {
  content: "Here is a description of Facebook.";
} */
.facebook .badge {
  background-color: #1877f2;
  color: #ffffff;
}

/* LinkedIn */
.linkedin {
  border-top: 2px solid #0a66c2;
}
/* .linkedin .text::after {
  content: "Here is a description of LinkedIn.";
} */
.linkedin .badge {
  background-color: #0a66c2;
  color: #ffffff;
}

/* Instagram (gradient; using a predominant color) */
.instagram {
  border-top: 2px solid #c13584;
}
/* .instagram .text::after {
  content: "Here is a description of Instagram.";
} */
.instagram .badge {
  background-color: #c13584;
  color: #ffffff;
}

/* YouTube */
.youtube {
  border-top: 2px solid #ff0000;
}
/* .youtube .text::after {
  content: "Here is a description of YouTube.";
} */
.youtube .badge {
  background-color: #ff0000;
  color: #ffffff;
}

/* TikTok */
.tiktok {
  border-top: 2px solid #000000;
}
/* .tiktok .text::after {
  content: "Here is a description of TikTok.";
} */
.tiktok .badge {
  background-color: #000000;
  color: #ffffff;
}

/* Pinterest */
.pinterest {
  border-top: 2px solid #bd081c;
}
/* .pinterest .text::after {
  content: "Here is a description of Pinterest.";
} */
.pinterest .badge {
  background-color: #bd081c;
  color: #ffffff;
}

/* WhatsApp */
.whatsapp {
  border-top: 2px solid #25d366;
}
/* .whatsapp .text::after {
  content: "Here is a description of WhatsApp.";
} */
.whatsapp .badge {
  background-color: #25d366;
  color: #ffffff;
}

/* Snapchat */
.snapchat {
  border-top: 2px solid #fffc00;
}
/* .snapchat .text::after {
  content: "Here is a description of Snapchat.";
} */
.snapchat .badge {
  background-color: #fffc00;
  color: #000000; /* Adjusted text color for better readability */
}

/* Vimeo */
.vimeo {
  border-top: 2px solid #1ab7ea;
}
/* .vimeo .text::after {
  content: "Here is a description of Vimeo.";
} */
.vimeo .badge {
  background-color: #1ab7ea;
  color: #ffffff;
}

/* Tumblr */
.tumblr {
  border-top: 2px solid #36465d;
}
/* .tumblr .text::after {
  content: "Here is a description of Tumblr.";
} */
.tumblr .badge {
  background-color: #36465d;
  color: #ffffff;
}

/* Quora */
.quora {
  border-top: 2px solid #b92b27;
}
/* .quora .text::after {
  content: "Here is a description of Quora.";
} */
.quora .badge {
  background-color: #b92b27;
  color: #ffffff;
}

/* Reddit */
.reddit {
  border-top: 2px solid #ff4500;
}
/* .reddit .text::after {
  content: "Here is a description of Reddit.";
} */
.reddit .badge {
  background-color: #ff4500;
  color: #ffffff;
}

/* Github */
.github {
  border-top: 2px solid #333333;
}
/* .github .text::after {
  content: "Here is a description of Github.";
} */
.github .badge {
  background-color: #333333;
  color: #ffffff;
}