/* Logo badge */
/* Logo container */
.logo-badge {
  display: inline-flex;
  align-items: center;
}

/* Logo image size */
.logo-img {
  height: 70px;  /* Adjust as needed */
  width: auto;
}

/* Make sure logo resizes on mobile */
@media (max-width: 576px) {
  .logo-img {
    height: 28px;
  }
}

.hero {
    padding-top: 100px;
    padding-bottom: 100px ;
    background-image: 
        linear-gradient(270deg, #68b984, #3a87f9, #68b984),
        url('../img/cloth-hanger.png');
    background-size: 600% 100%, cover; /* Animate gradient only */
    background-position: 0% 0%, center;
    background-repeat: no-repeat;
    animation: moveGradient 10s ease infinite;
    color: #fff;
}

@keyframes moveGradient {
    0% {
        background-position: 0% 0%, center;
    }
    50% {
        background-position: 100% 0%, center;
    }
    100% {
        background-position: 0% 0%, center;
    }
}

.btn-hero {
    background: rgba(255, 255, 255, 0.15);
    /* background-color: #fff; */
    /* border-color: #3a87f9; */
    color: #fff;
}

.btn-hero:hover {
  background-color: #fff;
  /* border-color: #0d6efd; */
  color: #0d6efd;
}

.btn-outline-hero {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    /* border-color: #68b984; */
}

.btn-outline-hero:hover {
  background-color: #fff;
  color: #68b984;
}

/* Hero section */
.hero h1 {
  font-size: 2.5rem;
}

.hero p.lead {
  max-width: 700px;
  margin: auto;
}

.challenge-card {
  background-color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* display: flex; */
  /* flex-direction: column; */
  height: 100%;
}

.challenge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4em 0.65em;
  border-radius: 0.5rem;
  line-height: 1;
  text-transform: none; /* or uppercase if needed */
  display: inline-block;   /* Make it inline, not block */
  text-align: left;
  margin-bottom: 10px;
}


.badge-voting {
  background-color: #ffe08a;
  color: #5c4300;
}

.badge-open {
  background-color: #d1f7d6;
  color: #14532d;
}

.badge-closed {
  background-color: #e2e3e5;
  color: #343a40;
}



/* Footer tweaks */
.footer a {
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Responsive heading size */
@media (min-width: 768px) {
  .hero h1 {
    font-size: 3rem;
  }
}