.features_content { padding-bottom: 50px; } .mobile-feature-select { display: none; } .custom-select-wrapper { position: relative; width: 100%; } .custom-select { position: relative; width: 100%; } .custom-select__trigger { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 500; color: #222; transition: all 0.2s ease; } .custom-select__trigger:hover { border-color: #ccc; } .custom-select__trigger svg { transition: transform 0.2s ease; } .custom-select.open .custom-select__trigger { border-color: #000; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .custom-select.open .custom-select__trigger svg { transform: rotate(180deg); } .custom-options { position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; border: 1px solid #000; border-top: none; border-radius: 0 0 10px 10px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .custom-select.open .custom-options { max-height: 300px; overflow-y: auto; opacity: 1; visibility: visible; } .custom-option { padding: 12px 16px; cursor: pointer; font-size: 14px; color: #333; transition: all 0.15s ease; border-bottom: 1px solid #f0f0f0; } .custom-option:last-child { border-bottom: none; } .custom-option:hover { background-color: #f8f8f8; color: #9d2800; } .custom-option.selected { background-color: #E6EAEF; font-weight: 500; color: #000; } /* Responsive - max-width 1024px */ @media screen and (max-width: 1024px) { .page_title { padding-top: 20px; } .page_title h1 { font-size: 20px; } .page_title p { font-size: 15px; } .breadcrumb { padding: 20px; padding-bottom: 0; } /* Hide sidebar on mobile */ .features_content .features_sidebar { display: none; } /* Show mobile select on mobile */ .mobile-feature-select { display: block; width: 100%; margin-bottom: 20px; } .features_content { flex-direction: column; padding: 0 20px; margin-top: 20px; } .page_title .container { display: flex; flex-direction: column; gap: 0; max-width: 100%; padding: 0 20px; } } h1.flex {display: flex; align-items: center; gap: 10px;}