.hero-bg {
  background-color: #7a1640;
  background-image: url('../img/maroonvshape.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

.hero-linearbg {
  background-image: url('../img/linerbg.webp');
  background-repeat: no-repeat;
  background-size: cover;
}

select { -webkit-appearance: none; appearance: none; }

/* "1" before rank heading */
.rank-heading { position: relative; }
.rank-heading::before {
  content: none;
}
@media (min-width: 640px) {
  .rank-heading::before {
    display: none;
  }
}
@media (min-width: 1024px) {
  .rank-heading::before { width: 150px; height: 170px; }
  
}

/* Mentor heading — rocket icon via ::before */
.mentor-heading { position: relative; }
.mentor-heading::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: url('../img/rockectblue.png') no-repeat center / contain;
}
@media (min-width: 640px) {
  .mentor-heading::before { width: 80px; height: 80px; }
}
@media (min-width: 1200px) {
  .mentor-heading::before { width: 90px; height: 90px; }
}

/* Topper card — yellow sprinkle bottom-right via ::before */
.topper-card { position: relative; }
.topper-card::before {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: url('../img/yellowsprinkle.png') no-repeat center / contain;
  pointer-events: none;
}
@media (min-width: 640px) {
  .topper-card::before {
    bottom: 28px;
    right: 18px;
    width: 55px;
    height: 55px;
  }
}
@media (min-width: 1024px) {
  .topper-card::before {
    bottom: 40px;
    right: 25px;
    width: 70px;
    height: 70px;
  }
}

.topper-bg {
  background-image: url('../img/toppers-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}