/* Tus estilos actuales */
   @font-face {
    font-family: 'LEMONMILK-Bold';
    src: url('../fonts/LEMONMILK-Bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Adam-Bold';
    src: url('../fonts/Adam-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .lemonmilk {
    font-family: LEMONMILK-Bold !important;
    font-weight: 300;
  }

  .adambold {
    font-family: Adam-Bold !important;
    font-weight: 300;
  }

  .filtros {
    background-color: #21333a;
  }

  .filtros h4 {
    color: #efefef;
    font-weight: bold;
  }

  .filtros select {
    background-color: #788aa3;
    color: #efefef;
    font-family: Adam-Bold;
    border: none;
    padding: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    padding-right: 40px;
    background-image: url('./../Imagenes/flecha.png');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 15px;
    cursor: pointer;
    text-align: center;
    font-size: 1.1rem;
  }

  .filtros select {
    background-position: right 20px center;
  }

  @media (max-width: 991px) {
    .filtros select {
      background-position: right 10px center;
    }
  }

  @media (max-width: 767px) {
    .filtros select {
      background-position: right 5px center;
    }
  }

  @media (min-width: 768px) {

    .dep,
    .dor {
      border-right: 1px solid white !important;
    }
  }

  @media (max-width: 767px) {

    .dep,
    .dor {
      border-right: none !important;
    }
  }

  .select-container {
    display: flex;
    align-items: center;
  }

  .select-container select:first-child {
    border-right: 1px solid white;
  }

  .select-container select:nth-child(2) {
    border-right: 1px solid white;
  }

  .filtros select::-ms-expand {
    display: none;
  }

  .filtros select:hover,
  .filtros select:focus {
    background-color: #5e738f;
  }

  .filtros input {
    background-color: #788aa3;
    border: none;
    color: #efefef;
  }

  .filtros input[name="ubicacion"] {
    padding: 10px;
    font-size: 1.1rem;
    height: 100%;
    background-color: #788aa3;
    border: none;
    color: #efefef;
  }

  .filtros input::placeholder {
    color: #FFFFFF94;
    opacity: 1;
  }

  .input-container {
    position: relative;
    width: 100%;
  }

  .input-icon {
    width: 100%;
    padding-left: 40px;
  }

  .input-svg {
    position: absolute;
    left: 92%;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
  }

  .opcion-btn.seleccionado {
    background-color: #efefef;
    color: #788aa3;
  }

  .buscar {
    background-color: #788aa3;
    border: none;
    color: #efefef;
  }

  @media (max-width: 700px) {

    .dep,
    .dor,
    .filtros input {
      border: none;
      border-radius: 5px;
    }
  }

  .adambold.dep,
  .adambold.dor,
  .adambold.placeh {
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 991px) {

    .adambold.dep,
    .adambold.dor,
    .adambold.placeh {
      font-size: 0.9rem;
    }

    input[type="text"]::placeholder {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 767px) {

    .adambold.dep,
    .adambold.dor,
    .adambold.placeh {
      font-size: 0.8rem;
      padding: 8px;
    }

    input[type="text"]::placeholder {
      font-size: 0.8rem;
    }
  }

  @media (max-width: 575px) {

    .adambold.dep,
    .adambold.dor,
    .adambold.placeh {
      font-size: 0.75rem;
      padding: 6px;
    }

    input[type="text"]::placeholder {
      font-size: 0.75rem;
    }

    .row.justify-content-center.g-0 {
      margin: 0 -5px;
    }
  }

  /* Nuevos estilos para la imagen de fondo */
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .filtros {
    height: 100vh;
    /* Ocupa el 100% del alto de la pantalla */
    width: 100vw;
    /* Ocupa el 100% del ancho de la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../Vista/Assets/Imagenes/ImagenesPaginas/seccionFiltros/portada1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }

  .content {
    background-color: rgba(33, 51, 58, 0.8);
    /* Fondo semitransparente para el contenido */
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 1200px;
    /* Ancho máximo del contenido */
  }