.filter-container-parent {
    position: relative;
    width: 100%;
    padding: 0 3rem
}

.find-jobs-container {
    border-radius: 1.25rem;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 2rem;
    width: 100%;
    max-width: 1700px;
    position: relative;
    z-index: 10;
    margin: 0 auto;
}

.find-jobs {
    display: flex;
    gap: 8px;
    justify-content: center
}

.search-job-name {
    flex-basis: 70%
}

.job-address {
    flex-basis: 30%
}

.job-address,
.search-job-name {
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    gap: .5rem;
    background-color: #f5f5f5;
    height: 2.9rem;
    position: relative;
    display: flex;
    align-items: center
}

.job-address input,
.search-job-name input {
    border: 0;
    border-radius: 8px;
    outline: 0;
    width: 100%;
    background-color: #f5f5f5;
    height: 100%;
    padding-left: 2rem
}

.find-jobs button {
    border: 0;
    outline: 0;
    background-color: #a5c5e5;
    color: #1a1a1a;
    padding: 8px 14px;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    flex-basis: 10%;
    cursor: pointer
}

.search-job-name input::placeholder {
    font-size: 1rem;
    color: #a8a8a8
}

.job-address img,
.search-job-name img {
    position: absolute;
    left: 10px;
    width: 1.135rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.lang_ar .job-address img,
.lang_ar .search-job-name img {
    left: unset;
    right: 10px
}

.lang_ar .job-address input,
.lang_ar .search-job-name input {
    padding-left: 0;
    padding-right: 2rem
}

.job-address input::placeholder {
    font-size: 1rem;
    color: #a8a8a8
}

.lang_ar .find-jobs button {
    flex-basis: 12%
}

.alphabet-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #1a1a1a;
    margin-top: 10px
}

.alphabet-filter span {
    color: #1a1a1a;
    cursor: pointer;
    transition: color .3s ease
}



@media screen and (max-width:1080px) {
    .find-jobs button {
        font-size: 0.875rem;
        padding: 9px 0
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) and (orientation: portrait) {
  /* iPad mini / small tablets in portrait */   
  .filter-container-parent{
    padding: 0 2rem;
  }
  .search-job-name{
    flex-basis: 60%;
  }

  .find-jobs button{
    flex-basis: 13%;
  }
  .lang_ar .search-job-name{
    flex-basis: 55%;
  }
  .lang_ar .find-jobs button {
    flex-basis: 15%
}
}

@media screen and (min-width: 769px) and (max-width: 820px) and (orientation: portrait) {
  /* iPad Air (portrait) */
  .search-job-name{
    flex-basis: 60%;
  }

  .find-jobs button{
    flex-basis: 13%;
  }
  .lang_ar .search-job-name{
    flex-basis: 55%;
  }
  .lang_ar .find-jobs button {
    flex-basis: 15%
}


}

@media screen and (min-width: 821px) and (max-width: 834px) and (orientation: portrait) {
  /* iPad Pro 11" (portrait) */
  .search-job-name{
    flex-basis: 60%;
  }
  .job-address {
    flex-basis: 28%;
}
  .find-jobs button{
    flex-basis: 12%;
  }
}

@media screen and (min-width: 835px) and (max-width: 1024px) and (orientation: portrait) {
  /* iPad Pro 12.9" and large tablets (portrait) */
  .search-job-name{
    flex-basis: 60%;
  }
  .job-address {
    flex-basis: 28%;
}
  .find-jobs button{
    flex-basis: 12%;
  }
}


@media screen and (max-width:576px) {
    .find-jobs-container {
        padding: 1rem;
    }
    .search-job-name,
    .job-address {
        flex-basis: unset;
        height: 2.5rem
    }
    .filter-container-parent {
        padding: 0rem 1rem
    }
    .alphabet-filter {
        display: none
    }
    .search-bar button {
        display: none
    }
    .mobile-btn-search {
        display: block;
        width: 100%
    }
    .search-bar {
        flex-direction: column;
        gap: .5rem
    }
    .search-icon-field {
        width: 100%
    }
    .location-icon-field {
        width: 100%
    }
    .find-jobs {
        flex-direction: column
    }
}