.search-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Container for the search input and button */
.search-bar-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  display: flex;              /* NEW */
  align-items: center;        /* NEW */
  gap: 8px;                   /* Optional spacing between items */
  transition: transform 0.4s ease, top 0.8s ease;
  will-change: transform;
  z-index: 99;
}

/* Hidden state */
.search-bar-hidden {
  transform: translate(-50%, -200%);
}

/* Search input */
.search-input {
  flex: 1; /* This makes it take up available space */
  min-width: 0;
  padding: 10px 80px 10px 15px!important; /* Space for the icon on the right */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 25px!important;
  box-sizing: border-box;
  background-color: #fff;
  color: #333;
  transition: border-color 0.3s ease;
}

/* Change border color on focus */
.search-input:focus {
  border-color: #7f00ff;
  outline: none;
}

/* Search button with the icon */
.search-btn {
    position: absolute;
  top: 0px;
  right: 53px;
  bottom: 16px;
  width: 50px;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  border: none;
  color: white;
  border-radius: 0 25px 25px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.search-btn:hover{
    background: linear-gradient(to right, #7f00ff, #00c6ff);
}
.search-btn i {
  font-size: 18px;
  color: #fff;
  pointer-events: none;
}
body.dark-mode .search-btn i{
    color:#fff!important;
}
body.dark-mode .search-input {
  background-color: #333;
  color: #fff;
  border-color: #444;
}

body.dark-mode .search-btn i {
  color: #00c6ff; /* Light blue for dark mode */
}

body.dark-mode .search-btn:hover i {
  color: #ff0000;
}

@media screen and (min-width: 1762px) {
  .search-bar-container {
    top: 70px;
  }
}

/* smaller desktop */
@media screen and (min-width: 1280px) and (max-width: 1761px){
    .search-bar-container{
        width:100%;
        top:65px;
    }
    .search-input{
        padding:10px 70px 10px 15px!important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .search-bar-container{
        width:100%;
        top:65px;
    }
    .search-input{
        padding:10px 60px 10px 15px!important;
    }
}

/* tablet */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .search-bar-container{
        width:80%;
        top:65px;
    }
    
    .search-input{
        padding:10px 60px 10px 15px!important;
    }
}

@media screen and (min-width: 370px) and (max-width: 639px){
    .search-bar-container{
        width:80%;
        top:65px;
    }
    
    .search-bar{
        margin-bottom:50px;
    }
    
    .search-input{
        padding:10px 54px 10px 15px!important;
    }
}

@media screen and (max-width: 369px) {
    .search-bar-container{
        width:95%;
        top:65px;
    }
    
    .search-bar{
        margin-bottom:40px;
    }
    
    .search-input{
        padding:10px 50px 10px 15px!important;
    }
}

.search-bar-container.scrolled {
  top: 10px !important;
}