/* Filter Part */
.filterDiv {font-size: 0.8rem;}
.filterDiv select {font-size: 0.8rem;padding-bottom: 0.25rem;}
.filterDiv .dropdown {border: none;border-bottom: 1px solid white;color: white;background-color: var(--website-background);border-radius: 0;padding-top: 0.25rem;padding-right: 0.5rem;width: 100%;}
.filterDiv .filterBtn {border:1px solid white;background: none;color: white;padding:10px 25px 5px 25px;border-radius: 20px;font-family: 'Epilogue', sans-serif;height: fit-content;width: 100%;}
.filterDiv .filterBtn.active{border:0;background: var(--website-theme-color);color:#000000;}
.filterDiv .innerContent{display: flex;align-items: center;justify-content: center;border: 1px solid #fff;flex-wrap: wrap; border-radius: 1.04dvw;}
.filterDiv .innerContent .hamburger {width: 25px; height: 20px; display: flex;flex-direction: column;justify-content: space-between;align-items: end;margin-right: 10px;}
.filterDiv .innerContent .hamburger .line {width: 100%;height: 20%;background-color: #fff;border-radius: 25px;margin: 0;}
.filterDiv .innerContent .hamburger .line:nth-child(2) {width: 75%;}
.filterDiv .innerContent .hamburger .line:nth-child(3) {width: 50%;}
.filterDiv .innerContent .resetBtn {border: 0;border-bottom: 2px solid var(--highlighted-color);background: none;color: white;padding-left: 1.5rem;align-self: flex-end;margin-bottom: 1.5px;}
.filterDiv .innerContent .filterLogo {display: flex;align-items: center;justify-content: center;padding: 1.5rem;transition: padding 0.3s ease;}
.filterDiv .innerContent .vl {height: 3rem; width: 0.5px; background-color: white;}
.filterDiv .innerContent .filterContent {display: flex; align-items: stretch;justify-content: space-between;flex: 1;padding: 1.5rem;transition: padding 0.3s ease;}
.filterDiv .innerContent .filterContent .priceRangeDiv, .filterDiv .innerContent .filterContent .searchDiv {width: 40%;display: flex;flex-flow: column;justify-content: space-between;}
.filterDiv .innerContent .filterContent .title {padding-bottom: 0.25rem;padding-left: 0.25rem;}
.filterDiv .innerContent .filterContent .priceRangeDiv .inputBox, .filterDiv .innerContent .filterContent .searchDiv .inputBox {display: flex;align-items: center;justify-content: center;gap: 0.5rem;flex-grow: 1;}
.filterDiv .innerContent .filterContent .priceRangeDiv .inputBox input, .filterDiv .innerContent .filterContent .searchDiv .inputBox input {border-radius: 15px; color: white; border: 1px solid white; background-color: rgb(217, 217, 217, 0.3); padding: 0.25rem 1rem;width: 100%;}
.filterDiv .innerContent .filterContent .priceRangeDiv .inputBox input::placeholder, .filterDiv .innerContent .filterContent .searchDiv .inputBox input::placeholder {color: white;}
.filterDiv .innerContent .filterContent .priceRangeDiv .inputBox .rangeLine {height: 1px; width: 3rem; background-color: white;}
.filterDiv .innerContent .filterContent .otherFilterContent {display: flex;flex: 1;gap: 2rem;align-items: flex-end;padding: 0 3rem 0 4rem;justify-content: space-around;}
.filterDiv .innerContent .resetBtnDiv {width: 5%; justify-content: flex-end;}
.filterDiv .innerContent .resetBtnDiv.mobileView {display: none;}
.filterDiv .outerContent {display: flex;justify-content: space-between;align-items: center;padding: 1.5rem;}
.filterDiv .outerContent .dropdownDiv {padding: 0 0.5rem;}
.filterDiv .outerContent .dropdownDiv .dropdown {padding: 0;}
.filterDiv .innerContent .expandFilterBtn {display: none;align-items: center;justify-content: center;cursor: pointer;padding-bottom: 0.5rem;}

@media screen and (max-width: 1000px) {
    /* Filter Part */
    .filterDiv .innerContent .filterLogo {padding: 1.5rem 1.5vw;}
    .filterDiv .innerContent .filterContent {padding: 1.5rem 1.5vw;}
}

@media screen and (max-width: 850px) {
    .filterDiv .innerContent {flex-flow: column; border-radius: 1.04dvw;}
    .filterDiv .innerContent .vl {width: 95%; height: 0.5px;display: none;}
    .filterDiv .innerContent .vl.expand {width: 95%; height: 0.5px;animation: fadeIn 0.5s;display: block;}
    .filterDiv .innerContent .filterLogo {padding: 1rem 3vw;}
    .filterDiv .innerContent .filterContent{max-height: 0;overflow: hidden;flex-flow: column;width: 100%;padding: 0;padding: 0 3vw;transition: all 0.5s ease;}
    .filterDiv .innerContent .filterContent.expand{max-height: 1000px;padding: 1rem 3vw;transition: all 0.5s ease;}
    .filterDiv .innerContent .filterContent .priceRangeDiv, .filterDiv .innerContent .filterContent .searchDiv {display: flex;flex-flow: row;align-items: center;width: 100%;padding: 0 0.25rem;gap: 1rem; border-bottom: unset !important;}
    .filterDiv .innerContent .filterContent .otherFilterContent{flex-wrap: wrap; width: 100%;gap: unset;padding: 0;}
    .filterDiv .innerContent .filterContent .otherFilterContent .section {width: 100%;}
    .filterDiv .innerContent .filterContent .title {padding-bottom: 0.25rem;padding-left: 0.25rem;padding: 0;}
    .filterDiv .innerContent .titleDiv {display: flex; align-items: center;justify-content: space-between;width: 100%;flex-wrap: wrap;}
    .filterDiv .innerContent .expandFilterBtn {display: flex;}
    .filterDiv .innerContent .expandFilterBtn ion-icon {font-size: 1.5rem;}
    .filterDiv .innerContent .resetBtnDiv.mobileView {display: flex;padding: 1rem 3vw;}
    .filterDiv .innerContent .resetBtnDiv.normalView {display: none !important;}
    .filterDiv .innerContent .filterContent .section {height: 40px;padding-bottom: 0.25rem;border-bottom: 1px solid rgb(255, 255, 255, 0.3);display: flex;align-items: end;}
    .filterDiv .innerContent .filterContent .dropdown {border-bottom: 0;}
    .filterDiv select {font-size: 0.8rem;}

    .filterDiv .outerContent{padding: 2rem 0rem;}
    .filterDiv .outerContent .dropdownDiv {width: 100%;}
}

@media screen and (max-width: 580px) {
    .filterDiv{font-size: 0.7rem;}
    .filterDiv select{font-size: 0.7rem;}
    .filterDiv .innerContent .filterContent .priceRangeDiv .inputBox input::placeholder, .filterDiv .innerContent .filterContent .searchDiv .inputBox input::placeholder {font-size: 0.7rem;}
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}