body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}
h1,
h2,
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}
h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

html {
  scroll-behavior: smooth;
}

.image {
  width: 100%;
  height: 10rem;
  object-fit: contain;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card {
  position: relative;
}

.card::after,
.card::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(
    from var(--angle),
    #ff4545,
    #00ff99,
    #006aff,
    #ff0095
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  padding: 20px;
  border-radius: 20px;
  animation: spin 3s linear infinite;
}

.card::before {
  filter: blur(1.5rem);
  opacity: 0.8;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}


.header-banner {
  /* Creates the diagonal cut on the right side */
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

/* Style for the section background */
.hero-section-bg {
  /* You can replace this placeholder URL with your actual network image */
  background-image: url('assets/hero-image.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}