@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;

}


.fancy-button {
  --border-right: 6px;
  --text-stroke-color: rgba(0, 0, 0, 0.6);
  --animation-color: #2eae2e;
  font-size: 1.5em;
  letter-spacing: 3px;
  color: transparent;
  position: relative;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}

.fancy-button .actual-text,
.fancy-button .hover-text {
  display: block;
}

.fancy-button .hover-text {
  position: absolute;
  inset: 0;
  width: 0%;
  color: var(--animation-color);
  overflow: hidden;
  border-right: var(--border-right) solid var(--animation-color);
  transition: width 0.5s ease;
  -webkit-text-stroke: 1px var(--animation-color);
}

.fancy-button:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color));
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px; /* Change this value to make it thinner or thicker */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* Scroll thumb color */
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent; /* Scrollbar track (behind the thumb) */
}

/* For Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

/* product card */
.flip-container {
  perspective: 1000px;
}

.flip-card {
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.flip-container:hover .flip-card {
  transform: rotateY(15deg) scale(1.05);
}

.rotate-45 {
  transform: rotate(45deg);
}

.list-ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #4a4a4a;
}

.list-li {
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}



#scrollTopBtn {
  transition: opacity 0.4s, box-shadow 0.2s, transform 0.3s, height 0.3s;
  box-shadow: 0 4px 36px rgba(24, 67, 80, 0.1);
  height: 40px;
  overflow: hidden;
}

#scrollTopBtn.show {
  opacity: 1;
  pointer-events: auto;
}

#scrollTopBtn:hover {
  background: #f3fcf3;  
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 32px rgba(244, 156, 187, 0.22);
  height: 120px; /* Expand the height on hover */
}
#scrollTopBtn:hover .smaller-one {
  /* color: #f80808 !important; Arrow color on hover */
  opacity: 0;
}

#scrollTopBtn:hover .fa-arrow-up {
  color: #000000 !important; /* Arrow color on hover */
}

#scrollTopBtn span {
  display: none; /* Hide text by default */
  transition: opacity 0.3s; /* Transition for text */
}

#scrollTopBtn:hover span {
  display: block; /* Show text on hover */
  opacity: 1;
  color: #000000;
}

#scrollTopBtn span:first-child {
  margin-bottom: 1rem; /* Space between the arrow and text */
}


/* External CSS for infinite rotation */
.rotate-infinite {
  animation: rotate360 5s linear infinite;
}
.rotate-infinite2 {
  animation: rotate360 7s linear infinite;
}

.rotate-infinite3 {
  animation: rotate360 9s linear infinite;
}


/* Keyframes for 360deg infinite rotation */
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}