@import url("https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

.font-hind-madurai {
  font-family: "Hind Madurai", sans-serif;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.font-roboto {
  font-family: "Roboto", sans-serif;
}

.single-card {
  transition: transform 0.3s ease;
}

.single-card:hover {
  transform: scale(1.05);
}

button,
.heart:hover {
  cursor: pointer;
}

.btn-copy:hover {
  background-color: black;
  color: white;
  transition: 0.9s;
}

.btn-call:hover,
.btn-clear:hover {
  background: linear-gradient(90deg, #86efac, #fbcfe8);
  color: #111;
  transition: 0.9s;
}

.heart:hover {
  color: red;
}

.btn-call i {
  pointer-events: none;
}

.btn-copy i {
  pointer-events: none;
}

/*Responsive for 320px-411px*/

@media only screen and (min-width: 320px) and (max-width: 411px) {
  .single-card .btn-copy,
  .single-card .btn-call {
    width: 100%; /* full width */
    margin-bottom: 8px; /* gap added between button */
    padding: 10px; /* responsive padding */
    font-size: 14px; /* responsive font size */
  }

  /* last button er jonno extra margin na thake */
  .single-card .btn-call {
    margin-bottom: 0;
  }
}