.source-sans-3 {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* Example weight */
  font-style: normal;
}


.merriweather{
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}


/* ================================== */
/* CSS for the Moving Border Effect  */
/* ================================== */

/* This is the main container for the effect */
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.moving-border-box {
  --border-size: 3px;
  --border-angle: 0deg;

  position: relative;
  background-image: conic-gradient(
    from var(--border-angle),
    #a2dffd, 
    #7994ff, 
    #f2d6f9
  );
  animation: border-spin 5s linear infinite;
  border-radius: 12px; /* This should match your inner card's border-radius */
}

/* This keyframe animation rotates the --border-angle property */
@keyframes border-spin {
  to {
    --border-angle: 360deg;
  }
}

/* This is the inner card that holds your content */
/* It has a background that covers the rotating gradient, leaving only the border visible */
.moving-border-box .content-card {
  background: gray-50; /* This should match your bg-gray-50 */
  border-radius: 10px; /* This should be slightly smaller than the parent's radius */
}


.feathered-edge {
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 60%, transparent 100%);
}


a.logo-link .logo-image-default {
  display: block;
}

a.logo-link:hover .logo-image-default {
  display: none;
}

a.logo-link .logo-image-hover {
  display: none;
}

a.logo-link:hover .logo-image-hover {
  display: block;
}

a.logo-link:hover .logo-text {
  transition: color 300ms; /* Added transition property */
  color: #2139B8;
}