/* 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;
}

.how-it-works .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 2rem;
  border: 2px solid #e0e0e0; /* Light gray border */
  background-color: #4890fc; /* White background */
  transition: transform 0.2s ease, border-color 0.2s ease;
  color: #fff;
}

.how-it-works .icon-circle:hover {
  transform: translateY(-3px);
  border-color: #e0e0e0;
}


.feature-list .icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9f7ef; /* very light green */
  color: #198754; /* Bootstrap success green */
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}

.feature-list {
  padding: 0;
  margin: 0;
}

.eligibility {
    border-radius: 20px;
}

.eligibility .icon-circle {
    width: 28px;
    height: 28px;
    background-color: #DBEAFE; /* Bootstrap primary */
    color: #2563EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* slightly larger icon */
    line-height: 1; /* prevent extra vertical offset */
}
.eligibility .icon-circle i {
    display: inline-block;
    line-height: 1;
}



/* Timeline status colors */
/* .list-group-item.completed {
  border-left: 4px solid #198754;
}

.list-group-item.current {
  border-left: 4px solid #0d6efd;
}

.list-group-item.upcoming {
  border-left: 4px solid #6c757d;
} */

/* Timeline wrapper */
.timeline {
  position: relative;
  padding-left: 40px;
  border-left: 3px solid #dee2e6;
}

/* Timeline item spacing */
.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

/* Marker (circle) */
.timeline-marker {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
}

/* Bootstrap 5.3+ supports -subtle classes.
   If you’re using older Bootstrap, you can use solid badge colors or define custom ones */

/* Completed step */
.timeline-item.completed .timeline-marker {
  background: #198754; /* green */
}

/* Current step */
.timeline-item.current .timeline-marker {
  background: #0d6efd; /* blue */
}

/* Text content */
.timeline-content h5 {
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.timeline-content p {
  margin-bottom: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .timeline {
    padding-left: 30px;
  }
  .timeline-marker {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    left: -18px;
  }
}

.hero-bottom {
    padding-top: 70px;
    padding-bottom: 70px;
    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;
}


/* 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;
  }
}