* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #eef2f5;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }

    /* Import Google Fonts for unique typography */
    @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

    

    .overlay-search {
      width: 1100px;
      max-width: 94%;
      position: relative;
      z-index: 10;
      margin: 0 auto;
      animation: floatUp 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    @keyframes floatUp {
      0% {
        opacity: 0;
        transform: translateY(35px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Unique pill-shaped tabs with neumorphism touch */
    .tabs {
      display: flex;
      align-items: center;
      background: rgba(20, 28, 38, 0.75);
      backdrop-filter: blur(20px);
      width: fit-content;
      border-radius: 80px;
      padding: 6px;
      gap: 8px;
      margin-bottom: 24px;
      border: 1px solid rgba(184, 145, 75, 0.35);
      box-shadow: 0 15px 35px -12px rgba(0, 0, 0, 0.4);
    }

    .tab {
      padding: 12px 34px;
      color: rgba(255, 250, 240, 0.8);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      background: transparent;
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      border-radius: 60px;
      font-family: 'Inter', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .tab i {
      font-size: 1rem;
      transition: transform 0.2s;
    }

    .tab.active {
      background: linear-gradient(135deg, #c49a6c 0%, #b8874f 100%);
      color: #0f1219;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    }

    .tab.active i {
      color: #1e1b13;
    }

    .tab:hover:not(.active) {
      background: rgba(196, 154, 108, 0.35);
      color: #ffffff;
      transform: translateY(-2px);
    }

    /* Search container - unique floating card with depth */
    .search-bar {
      display: none;
      background: rgba(255, 255, 255, 0.97);
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 170, 0.3) inset;
      transition: all 0.3s;
    }

    .search-bar.active {
      display: flex;
      animation: panelGlow 0.45s ease-out;
    }

    @keyframes panelGlow {
      0% {
        opacity: 0;
        transform: scale(0.97);
        box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.5);
      }
    }

    /* Grid layout for fields - more spacious and unique */
    .fields-grid {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }

    .field {
      flex: 1 1 0px;
      min-width: 200px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0px 22px;
      background: #ffffff;
      transition: all 0.2s;
      border-right: 1px solid #ede6db;
    }

    .field:last-child {
      border-right: none;
    }

    /* unique icon badge style */
    .field-icon {
      width: 42px;
      height: 42px;
      background: linear-gradient(145deg, #f8f3ea, #f0e9df);
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      color: #b8874f;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.02), 0 2px 5px rgba(0,0,0,0.05);
    }

    .field-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 14px 0;
    }

    .field-content label {
      font-size: 0.65rem;
      font-weight: 800;
      color: #8b7355;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 6px;
      font-family: 'Inter', monospace;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .field-content label i {
      font-size: 0.7rem;
      color: #b8874f;
    }

    .field-content input,
    .field-content select {
      width: 100%;
      border: none!important;
      outline: none;
      background: transparent;
      font-size: 0.95rem;
      font-weight: 550;
      color: #1f2a3e;
      font-family: 'Inter', sans-serif;
      /*padding: 4px 0;*/
      
    }

    .field-content input::placeholder {
      color: #b9aa97;
      font-weight: 450;
    }

    .field-content select {
      cursor: pointer;
    }

    /* Gradient search button with unique icon animation */
    .search-btn {
      width: 95px;
      min-width: 95px;
      background: linear-gradient(125deg, #c49a6c, #ad7e48);
      border: none;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .search-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,245,0.3), transparent);
      transition: left 0.5s;
    }

    .search-btn:hover::before {
      left: 100%;
    }

    .search-btn:hover {
      background: linear-gradient(125deg, #d4a872, #b87a3c);
      width: 110px;
    }

    .search-btn i {
      transition: transform 0.2s;
    }

    .search-btn:hover i {
      transform: translateX(5px);
    }

    /* Decorative corner element */
    .luxury-marker {
      position: absolute;
      bottom: 20px;
      left: 28px;
      z-index: 12;
      font-size: 0.7rem;
      font-family: 'Playfair Display', serif;
      font-style: italic;
      color: rgba(255,245,225,0.65);
      letter-spacing: 2px;
      backdrop-filter: blur(5px);
      background: rgba(0,0,0,0.2);
      padding: 5px 14px;
      border-radius: 40px;
      pointer-events: none;
    }

    /* responsive finesse */
    @media (max-width: 920px) {
     
      .tabs {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 60px;
        gap: 6px;
      }

      .tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.8rem;
      }

      .search-bar.active {
        flex-direction: column;
        border-radius: 28px;
      }

      .fields-grid {
        flex-direction: column;
        width: 100%;
      }

      .field {
        border-right: none;
        border-bottom: 1px solid #ede6db;
        padding: 4px 20px;
      }

      .field:last-child {
        border-bottom: none;
      }

      .search-btn {
        width: 100%;
        min-width: auto;
        padding: 18px;
        font-size: 1.3rem;
      }

      .search-btn:hover {
        width: 100%;
      }
      
      .field-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
      }
    }

    @media (max-width: 550px) {
      .field {
        gap: 8px;
        padding: 8px 16px;
      }
      
      .field-content {
        padding: 10px 0;
      }
      
      .field-icon {
        width: 32px;
        height: 32px;
      }
      
      .tab i {
        font-size: 0.8rem;
      }
    }

    /* Custom styling for select dropdown */
    select option {
      background: #ffffff;
      color: #2c3e44;
      font-weight: 500;
      
    }

    /* Additional unique detail - focus ring */
    .field-content input:focus,
    .field-content select:focus {
      border-bottom: 1px solid #c49a6c!important;
    }
    
    
    /*navbar===================================css===========start*/
    
     .custom-top-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /*padding: 18px 24px;*/
    /*background: #fff;*/
    border-radius: 6px;
  }

  .tool-item {
    display: flex;
    align-items: center;
    position: relative;
  }

  .tool-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    text-decoration: none;
    position: relative;
  }

  .tool-icon {
    width: 21px;
    height: 21px;
  }

  .count-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f2e8e6;
    color: #8e7d77;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
  }

  .tool-divider { 
    width: 1px;
    height: 30px;
    background: #e8e3df;
  }

  .tool-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  select {
    border: none!important;
    background: transparent!important;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    padding-right: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .tool-select-wrap::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #111;
    border-bottom: 1.5px solid #111;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
    
  }

  @media (max-width: 768px) {
    /*body {*/
    /*  padding: 20px;*/
    /*}*/

    .custom-top-tools {
      gap: 10px;
      padding: 14px 16px;
      flex-wrap: wrap;
    }

    .tool-divider {
      height: 22px;
    }

    select {
      font-size: 14px;
    }

    .tool-icon {
      width: 18px;
      height: 18px;
    }
  }