body {
  font-family: "Cairo", sans-serif;
}

.element,
.svg-border {
  border-bottom: 15px solid transparent; /* Set border-bottom width */
  /* border-image: url("data:image/svg+xml,%3Csvg width='64' height='7' viewBox='0 0 64 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62.5847 2.45156V3.45156C63.1179 3.45156 63.5573 3.0333 63.5835 2.50079C63.6097 1.96829 63.2136 1.50884 62.6831 1.45641L62.5847 2.45156ZM22.9928 4.23251C22.4556 4.36091 22.1243 4.90046 22.2527 5.43761C22.3811 5.97476 22.9207 6.3061 23.4578 6.17769L22.9928 4.23251ZM0.97255 3.44659C9.02953 2.6409 38.4386 1.07025 62.4864 3.44672L62.6831 1.45641C38.4629 -0.937091 8.91385 0.642492 0.773544 1.45652L0.97255 3.44659ZM62.5847 1.45156C50.0872 1.45156 33.639 1.68744 22.9928 4.23251L23.4578 6.17769C33.8305 3.69801 50.0271 3.45156 62.5847 3.45156V1.45156Z' fill='%23E22A38'/%3E%3C/svg%3E%0A")
    10 stretch; */
  border-image: url("data:image/svg+xml,%3Csvg width='197' height='35' viewBox='0 0 197 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.15527 13.3937C26.1553 8.58628 117.155 -0.763778 191.655 13.3937C152.983 13.3937 102.597 14.8253 70.1553 29.739' stroke='%23E22A38' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  border-image-slice: 30;
  border-image-repeat: stretch;
}

.top-sarts-bg {
  position: absolute;
  top: 0;
  left: 2rem;
  height: 100%;
  width: 100%; /* Make the width responsive */
  max-width: 200px; /* Set the max width for control */
  background: url("../images/homepage/hero-stars-bottom.svg") no-repeat center
    center;
  background-size: cover;
  z-index: 1;

  /* Initial state for the animation */
  transform: rotate(45deg) translateY(0); /* Initial state: rotate and no vertical movement */
  opacity: 0; /* Start with opacity 0 */

  /* Animation properties */
  animation: rotateMoveDown 3s ease-in infinite;
}

/* Keyframes for rotation and fade-in */
/* Keyframes for rotation, moving down, and fade-out */
@keyframes rotateMoveDown {
  0% {
    transform: rotate(45deg) translateY(0);
    opacity: 0; /* Hidden */
  }

  50% {
    transform: rotate(-30deg) translateY(0);
    opacity: 1; /* Remain fully visible */
  }

  100% {
    transform: rotate(-50deg) translateY(200px);
    opacity: 0; /* Fully hidden */
  }
}

.background-circle {
  position: absolute;
  top: 4rem;
  left: -3rem;
  height: 350px;
  width: 350px;
  background: url("../images/homepage/circle-bg-blob.svg") no-repeat center
    center;
  background-size: contain;
  z-index: 1;
}

.star-icons {
  position: absolute;
  top: 0;
  left: -3rem;
  height: 100%;
  width: 100px;
  background: url("../images/homepage/stars.png") no-repeat center center;
  background-size: contain;
  z-index: 2;
}

.cards {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4;
  transform: translateY(112px);
}

.cards a.url-link {
  word-break: break-all; /* This will break the URL if it’s too long */
  overflow-wrap: break-word; /* Ensures long words or URLs break to the next line */
}

footer {
  background-image: url("../images/footer-bg.png");
}

/* Media Query */
@media (max-width: 768px) {
  .element {
    border-image: none;
    border-bottom: solid transparent;
  }
  .background-circle,
  .star-icons {
    overflow-x: hidden;
    left: 0;
  }
  .background-circle {
    width: 180px;
    left: -1rem;
  }
}