.course-search-bar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  border:1px solid #ccc;
  border-radius:6px;
  max-width:600px;
  margin:20px auto;
  background:#fff;
}
/* make Courses dropdown/button fixed width */
.dropdown-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: black;

  /* ↓ add fixed width or flex-basis */
  flex: 0 0 120px;  /* fixed width 120px for dropdown */
  text-align: left;
}
/* make search input fill the rest */
.search-input {
  /*flex: 1;*/
  border: none;
  outline: none;
  font-size: 1rem;
  width:400px;
}

.course-grid {
  display: grid;
  /* 5 columns on desktop */
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  /*padding: 20px;*/
  background: transparent;
  /*max-width: 1200px;*/
  margin-top: -25px;
  margin-left: 150px;
  width:1000px;
  /*position:fixed;*/
}

/* On medium screens (tablets) – 3 columns */
@media (max-width: 992px) {
  .course-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On small screens (mobile) – 2 columns */
@media (max-width: 576px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.course-grid.hidden {
  display:none;
}
.course-cardd {
  background:#fff;
  border-radius:8px;
  text-align:center;
  /*padding:15px 10px;*/
  cursor:pointer;
  transition:transform .2s ease;
  width:170px;
}
.course-card:hover {
  transform:translateY(-3px);
}
.course-cardd img {
    width: 130px;
    display: block;
    margin: 0 auto 8px;
    padding-top: 5px;

}
.course-card span {
  font-size:.85rem;
  font-weight:600;
  color:#ffffff;
}

.course-btn {
  display: inline-block;            
  background-color: #001E40;        
  color: #ffffff;                      
  padding: 8px 16px;                
  margin: 5px;                      
  border-radius: 5px;               
  cursor: pointer;                  
  text-align: center;               
  font-size: 12px;
  transition: background 0.3s;
  text-decoration: none;            
}

.course-btn:hover {
  background-color: #000000;        
}

.course-search-bar {
  position: relative; /* so the dropdown anchors here */
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  border:1px solid #ccc;
  border-radius:6px;
  max-width:600px;
  margin:20px auto;
  background:#fff;
}

.course-search-bar {
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0px solid #ccc;
  border-radius:6px;
  max-width:600px;
  margin:20px auto;
  background:transparent;
  /*width: 100%;*/
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background:#fff;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #ccc;
  border-top:none;
  max-height:250px;
  overflow-y:auto;
  z-index:9999;
}

.search-dropdown li {
  padding:10px 12px;
  cursor:pointer;
  font-size:14px;
  color:#000;
  border-bottom:1px solid #eee;
}

.search-dropdown li:hover {
  background:#f1f1f1;
}

.hidden {
  display:none;
}