/* =========================
   TECHNICAL MENTOR HERO
   ========================= */

.tm-hero{
  position: relative;
  min-height: 800px;
  padding: 120px 0 90px;
  background-image: var(--tm-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.tm-hero__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
 
}

.tm-hero .container{
  position: relative;
  z-index: 2;
}

.tm-hero__title{
  color: #ffffff;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.6px;
  font-size: clamp(38px, 5.2vw, 76px);
  margin: 0 0 26px;
  max-width: 780px;
}
.tm-hero .tm-hero__title{
  color: #fff !important;
}


.tm-hero__form{
  max-width: 680px;
}

.tm-hero__search{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
 
}

.tm-hero__search input{
  flex: 1;
  height: 54px;
  border: none;
  outline: none;
  border-radius: 14px;
  padding: 0 18px;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-weight: 600;
}

.tm-hero__search input::placeholder{
  color: rgba(255,255,255,.80);
}

.tm-hero__btn{
  height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  border: none;
  background: #2f6bff;
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 16px 28px rgba(47,107,255,.28);
  transition: .2s ease;
}

.tm-hero__btn:hover{
  background: #1f57e6;
  transform: translateY(-1px);
}

.tm-hero__btn i{
  font-size: 16px;
}

.tm-hero__tags{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tm-hero__tags-label{
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.tm-hero__tags-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tm-hero__tags-list a{
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 25px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.25);
  transition: .2s ease;
}

.tm-hero__tags-list a:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* =========================
   HERO SEARCH – MOBILE FIX
========================= */
@media (max-width: 768px){

  .tm-hero__title{
    font-size: clamp(28px, 8vw, 40px);
    margin-bottom: 18px;
  }

  .tm-hero__form{
    max-width: 100%;
  }

  .tm-hero__search{
    padding: 10px;
    gap: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,.45); /* darker glass for mobile */
    backdrop-filter: blur(6px);
  }

  .tm-hero__search input{
    height: 50px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 12px;
  }

  .tm-hero__btn{
    height: 50px;
    font-size: 15px;
    border-radius: 12px;
  }

  /* tags stack nicely */
  .tm-hero__tags{
    margin-top: 14px;
    gap: 8px;
  }

  .tm-hero__tags-label{
    width: 100%;
    font-size: 15px;
  }

  .tm-hero__tags-list a{
    padding: 6px 14px;
    font-size: 13px;
  }
}