.serach_form{
        max-width: 1100px;
        margin: 0 auto;
    }
    .serach_form ul{
    width:100%;
    column-gap: 30px;
    background:#fff;
    padding:12px 15px;
    align-items: center;
        padding-left: 30px;
    justify-content:space-between;
    display:flex;
    border-radius:45px;
    
}
.serach_form *{
    font-family: "Parkinsans", sans-serif !important;
    font-optical-sizing: auto;
}
.serach_form ul li{
    list-style:none;
}
.serach_form ul li label{
    color:#000;
        line-height: 13px;
    display:block;
    font-size: 15px;
    
    font-weight:600;
}
.serach_form ul li input{
    color:#595959;
    margin:0;
    padding:0;
    border-bottom:none;
    
    font-weight:400;
}
.serach_form ul li input::placeholder{
     color:#595959;
     font-size: 15px;
     font-weight: 400;
}

/* Hide native calendar icon for <input type="date"> */

/* Chrome, Safari, Edge, Opera */
.serach_form input[type="date"]::-webkit-inner-spin-button,
.serach_form input[type="date"]::-webkit-outer-spin-button,
.serach_form input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  display: none;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
}

/* Firefox: render date input like a text field (removes the picker icon) */
.serach_form input[type="date"] {
  -moz-appearance: textfield;
}

/* Some browsers show the icon as a background image; remove that as well */
.serach_form input[type="date"] {
  background-image: none;
}

.serach_form select {
  background: none !important;
  appearance: auto !important;
  border: none !important;
  padding-left: 0px;
  text-align: left;
}

.o_wrap{
display:flex;
    gap:10px;
    align-items:center;
    
}
.serach_form button{
    width:166px;
    height:54px;
    border-radius:42px;
    border:1px solid #187386;
    font-size:15px;
    color:#187386;
    cursor:pointer;
    font-weight:600;
    background:transparent;
}

.icon {    align-self: center;
    height: 100%;
    display: flex
      width: 25px;

;}
.icon img{
    width: 25px;
}

/* ---------- Responsive CSS for .serach_form (mobile-first) ---------- */

/* Container */
.serach_form {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* reset & base */
.serach_form * {
  font-family: "Parkinsans", sans-serif !important;
  box-sizing: border-box;
}

/* Make the list stack on mobile */
.serach_form form { width: 100%; }
.serach_form ul {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  display: block;               /* mobile: stacked */
  background: #fff;
  border-radius: 45px;
  list-style: none;
  box-shadow: 0 6px 18px rgba(10,10,10,0.06);
}

/* list items stack with small gap */
.serach_form ul li {
  display: block;
  margin-bottom: 12px;
}

/* remove last margin */
.serach_form ul li:last-child { margin-bottom: 0; }

/* inline wrapper for icon + field */
.o_wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

/* icon */
.icon { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.icon img { width: 24px; height: 24px; display: block; }

/* field wrapper */
.filed_wrap { flex: 1 1 auto; min-width: 0; }

/* label */
.serach_form ul li label {
  display:block;
  margin: 0 0 6px 0;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* inputs - full width on mobile */
.serach_form ul li input {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  color: #595959;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  padding-left: 0;
}

/* placeholder styling */
.serach_form ul li input::placeholder {
  color: #595959;
  font-size: 15px;
  font-weight: 400;
}

/* Search button - mobile: full width to match style if placed below inputs */
.serach_form ul li button {
  width: 100%;
  height: 54px;
  border-radius: 42px;
  border: 1px solid #187386;
  font-size: 15px;
  color: #187386;
  cursor: pointer;
  font-weight: 600;
  background: transparent;
  display: inline-block;
  padding: 0 22px;
  box-sizing: border-box;
}

/* Focus states for accessibility */
.serach_form input:focus,
.serach_form button:focus {
  outline: none;
  box-shadow: 0 0 0 5px rgba(24,115,134,0.08);
  border-radius: 12px;
}

/* Small helper: keep icon visually separated from text on small screens */
@media (max-width: 420px) {
  .icon { flex: 0 0 30px; }
  .icon img { width: 20px; height: 20px; }
  .serach_form ul { padding: 12px; border-radius: 34px; }
  .serach_form ul li label { font-size: 13px; }
  .serach_form ul li input::placeholder { font-size: 14px; }
}

/* ---------- Tablet & above: inline layout ---------- */
@media (min-width: 768px) {
  .serach_form ul {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
  }

  /* each li becomes a flexible column */
  .serach_form ul li {
    display: flex;
    align-items: center;
    margin: 0;
  }

  /* Make input areas flexible so date fields / guests remain compact */
  /* Give the location more room, dates medium, guests small, button fixed */
  .serach_form ul li:nth-child(1) { flex: 2 1 280px; } /* Location */
  .serach_form ul li:nth-child(2) { flex: 1 1 160px; } /* Check-In */
  .serach_form ul li:nth-child(3) { flex: 1 1 160px; } /* Check-Out */
  .serach_form ul li:nth-child(4) { flex: 0 0 90px; }  /* Guests */
  .serach_form ul li:nth-child(5) { flex: 0 0 166px; } /* Button */

  /* Align wrappers horizontally */
  .o_wrap { gap: 12px; }
  .filed_wrap { min-width: 0; }

  .serach_form ul li label { margin-bottom: 2px; font-size: 14px; }

  /* Make inputs look like single-line fields inline */
  .serach_form ul li input { padding: 8px 6px; padding-left: 0;}

  /* Button becomes fixed width */
  .serach_form ul li button {
    width: 166px;
    height: 54px;
    border-radius: 42px;
  }
}

/* ---------- Desktop: larger proportions ---------- */
@media (min-width: 1024px) {
  .serach_form ul { gap: 30px; padding-left: 30px; padding-right: 30px; }
  .serach_form ul li:nth-child(1) { flex-basis: 420px; }
  .serach_form ul li:nth-child(2),
  .serach_form ul li:nth-child(3) { flex-basis: 200px; }
  .serach_form ul li:nth-child(4) { flex-basis: 120px; }
  .serach_form ul li:nth-child(5) { flex-basis: 166px; }

  .serach_form ul li label { font-size: 15px; }
  .serach_form ul li input { font-size: 15px; }
  .icon { flex: 0 0 36px; }
  .icon img { width: 25px; height: 25px; }
}
@media (max-width: 768px) {
.serach_form ul {
    padding: 20px ;
border-radius: 10px;
}
}