.pageHeaderBg { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 50vh; background: url(../images/bg_elements.png); background-position: center; background-size: cover; margin-bottom: 50vh; } .serachSection { height: 50px; position: relative; } .txtBox { height: 60px; border-radius: 60px; border: solid 1px rgba(0, 0, 0, 0.1); background: #fff; padding: 0; width: 100%; font-size: 15px; font-weight: 700; font-style: normal; letter-spacing: normal; color: var(--txtColor); text-indent: 15px; outline: none; } .txtBox::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--txtColor); opacity: 0.5; /* Firefox */ font-weight: 500 !important; } .txtBox::-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--txtColor); opacity: 0.5; font-weight: 500 !important; } .txtBox::-ms-input-placeholder { /* Microsoft Edge */ color: var(--txtColor); opacity: 0.5; font-weight: 500 !important; } .serachBtn { background: url(../images/right2.svg) no-repeat; background-size: cover; height: 50px; width: 50px; border: none; position: absolute; top: 6px; right: 9px; outline: none; } .advancedFilter .filterButton { background: #f8f9fa; box-shadow: 0 0 2px #343a4063; width: 190px; border-radius: 10px; cursor: pointer; border: none; padding: 10px; text-align: left; color: #1c1107; font-size: 13px; font-weight: 600; font-stretch: normal; font-style: normal; outline: none; } .angle-arrow2 { background: url(../images/angle-arrow-down.svg) no-repeat; background-size: contain; width: 10px; height: 20px; font-weight: 900; position: absolute; top: 19px; right: 9px; margin: -3px 0; cursor: pointer; z-index: 9999; } #select_dropDown { background: #f8f9fa; box-shadow: 0 0 2px #343a4063; word-wrap: normal; width: 190px; border-radius: 10px; cursor: pointer; border: none; padding: 10px; text-align: left; color: #1c1107; font-size: 13px; font-weight: 600; font-stretch: normal; font-style: normal; outline: none; } .select_dropDown2 { position: absolute; top: 4px; font-size: 15px; width: 156px; overflow: hidden; object-fit: cover; right: 69px; padding: 16px 0; border-radius: 0; border: none; box-shadow: none; background: white; border-left: 1px solid rgba(0, 0, 0, 0.11); } .select_dropDown2:focus { outline: none; } .fillterWrapper { display: none; } .fillterWrapper label { margin: 0; text-indent: 12px; } .fillterWrapper input { border-radius: 10px; border: solid 1px rgba(0, 0, 0, 0.11); background-color: #fff; font-size: 12px; padding: 5px; text-indent: 15px; width: 190px; outline: none; } .active { top: 122px; background: #fff; box-shadow: 0 0 5px rgb(0 0 0 / 40%); padding: 15px 15px; border-radius: 15px; height: auto; position: absolute; right: -16px; margin: 1rem 0; flex-direction: column; width: 240px; display: inline-flex !important; gap: 5px; } .errorMsg { text-align: center; font-size: 20px; color: red; font-weight: 800; } #containerWd { width: 700px !important; } @media (max-width: 768px) { .wrapper_dropDown { align-items: flex-end; flex-direction: column; } .txtBox { height: 40px !important; } .serachBtn { height: 30px !important; width: 30px !important; } .advancedFilter .filterButton { top: 60px; } .select_dropDown2 { padding: 6px 0; width: 50px; } } @media (max-width: 768px) { .pageHeading h1 { font-size: 2.5rem; } #containerWd { width: 100% !important; } .active { top: 102px; display: flex; right: -5px; } .fillterWrapper input { width: 100%; margin-bottom: 10px; } } @media (max-width: 992px) { .navbar-nav .nav-item { padding: 0px !important; } }