.article-overview-section {   background-color: var(--bg-dark);   font-family: var(--site-font);   min-height: 520px; } .article-header-block {   margin-bottom: 24px; } .article-page-heading {   font-family: var(--site-font);   font-size: clamp(30px, 3.5vw, 44px);   font-weight: 700;   line-height: 120%;   color: var(--primary-color) !important;   text-transform: uppercase;   letter-spacing: 0.5px;   margin: 0; } .article-filter-row {   position: relative !important;   z-index: 1050 !important; } .article-filter-row.dropdown-active {   z-index: 999999 !important; } .article-dropdown-col {   position: relative !important;   z-index: 1060 !important; } .article-filter-row.dropdown-active .article-dropdown-col {   z-index: 999999 !important; } .article-search-wrapper {   position: relative;   width: 100%; } .article-search-wrapper .search-icon {   position: absolute;   top: 50%;   left: 16px;   transform: translateY(-50%);   color: #7A7A7A;   font-size: 14px;   pointer-events: none;   z-index: 3;   transition: color 0.2s ease; } .article-search-input {   background-color: #161616 !important;   border: 1px solid rgba(255, 255, 255, 0.12) !important;   border-radius: 8px !important;   color: var(--text-white) !important;   font-family: var(--site-font) !important;   font-size: 15px !important;   height: 46px !important;   padding-left: 44px !important;   padding-right: 16px !important;   box-shadow: none !important;   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; } .article-search-input::placeholder {   color: #7A7A7A !important;   font-size: 14px; } .article-search-input:focus {   background-color: #1a1a1a !important;   border-color: var(--primary-color) !important;   box-shadow: 0 0 0 3px rgba(196, 0, 14, 0.2) !important;   color: #FFFFFF !important; } .article-search-wrapper:focus-within .search-icon {   color: var(--primary-color); } .custom-category-dropdown {   position: relative !important;   user-select: none;   width: 100%; } .custom-category-dropdown.is-open {   z-index: 9999999 !important; } .category-dropdown-btn {   background-color: #161616;   border: 1px solid rgba(255, 255, 255, 0.12);   border-radius: 8px;   color: var(--text-white);   font-family: var(--site-font);   font-size: 14px;   font-weight: 400;   height: 46px;   padding: 0 16px;   cursor: pointer;   outline: none;   box-shadow: none;   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);   text-align: left; } .category-dropdown-btn:hover {   background-color: #1d1d1d;   border-color: rgba(255, 255, 255, 0.24); } .custom-category-dropdown.is-open .category-dropdown-btn, .category-dropdown-btn:focus-visible {   border-color: var(--primary-color);   box-shadow: 0 0 0 3px rgba(196, 0, 14, 0.2);   background-color: #1a1a1a; } .category-dropdown-btn #selectedCategoryText {   color: #E2E2E2;   font-size: 14px;   font-weight: 400;   letter-spacing: 0.2px; } .category-dropdown-btn .dropdown-chevron {   font-size: 12px;   color: #8C8C8C;   transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;   flex-shrink: 0; } .custom-category-dropdown.is-open .dropdown-chevron {   transform: rotate(180deg);   color: var(--primary-color); } .category-dropdown-menu {   position: absolute;   top: calc(100% + 6px);   left: 0;   right: 0;   background-color: #181818;   border: 1px solid rgba(255, 255, 255, 0.14);   border-radius: 10px;   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);   z-index: 99999999 !important;   padding: 6px 0;   opacity: 0;   visibility: hidden;   pointer-events: none;   transform: translateY(-8px) scale(0.98);   transform-origin: top center;   transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;   backdrop-filter: blur(12px);   -webkit-backdrop-filter: blur(12px); } .custom-category-dropdown.is-open .category-dropdown-menu {   opacity: 1 !important;   visibility: visible !important;   pointer-events: auto !important;   transform: translateY(0) scale(1) !important; } .category-options-list {   max-height: 270px;   overflow-y: auto;   overflow-x: hidden;   padding: 2px 6px; } .category-options-list::-webkit-scrollbar {   width: 5px; } .category-options-list::-webkit-scrollbar-track {   background: transparent; } .category-options-list::-webkit-scrollbar-thumb {   background: rgba(255, 255, 255, 0.18);   border-radius: 4px; } .category-options-list::-webkit-scrollbar-thumb:hover {   background: rgba(255, 255, 255, 0.32); } .category-option-item {   display: flex;   align-items: center;   justify-content: space-between;   padding: 10px 14px;   margin: 2px 0;   border-radius: 6px;   color: #BDBDBD;   font-size: 14px;   cursor: pointer !important;   pointer-events: auto !important;   position: relative;   z-index: 2;   transition: background-color 0.15s ease, color 0.15s ease;   outline: none; } .category-option-item:hover, .category-option-item:focus {   background-color: rgba(255, 255, 255, 0.08);   color: #FFFFFF; } .category-option-item.active {   background-color: rgba(196, 0, 14, 0.14);   color: #FFFFFF;   font-weight: 500; } .category-option-item .checkmark-icon {   font-size: 12px;   color: var(--primary-color);   opacity: 0;   transform: scale(0.6);   transition: opacity 0.15s ease, transform 0.15s ease; } .category-option-item.active .checkmark-icon {   opacity: 1;   transform: scale(1); } #articlesGridContainer {   position: relative !important;   z-index: 1 !important; } .article-col-item {   position: relative;   z-index: 1; } .article-card {   position: relative;   z-index: 1;   background-color: #161616;   border: 1px solid rgba(255, 255, 255, 0.08);   border-radius: 12px;   overflow: hidden;   transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .article-card:hover {   transform: translateY(-4px);   border-color: rgba(255, 255, 255, 0.2);   box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55); } .article-card-thumb-wrap {   aspect-ratio: 16 / 9;   background-color: #212121; } .article-card-thumb {   transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .article-card:hover .article-card-thumb {   transform: scale(1.05); } .article-category-tag {   font-size: 12px;   letter-spacing: 0.5px;   color: var(--primary-color);   display: inline-flex;   align-items: center; } .article-category-tag .category-slash {   font-weight: 700;   opacity: 0.9;   margin-right: 4px; } .article-card-title {   font-size: 18px;   font-weight: 600;   line-height: 135%;   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2;   overflow: hidden;   transition: color 0.2s ease; } .article-card:hover .article-card-title {   color: #FFFFFF; } .article-card-desc {   font-size: 14px;   line-height: 155%;   color: var(--text-muted);   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 3;   overflow: hidden; } .article-read-more-link {   color: var(--primary-color) !important;   font-size: 14px;   letter-spacing: 0.2px;   transition: gap 0.2s ease, opacity 0.2s ease; } .article-read-more-link i, .article-read-more-link .fa-arrow-right {   color: var(--primary-color) !important;   transition: transform 0.2s ease; } .article-card:hover .article-read-more-link i, .article-card:hover .article-read-more-link .fa-arrow-right {   transform: translateX(4px); } .article-read-more-link:hover, .article-read-more-link:hover i, .article-read-more-link:hover .fa-arrow-right {   color: #e0202e !important;   text-decoration: underline !important; } .article-page-btn {   width: 38px;   height: 38px;   border-radius: 6px !important;   background-color: #161616 !important;   border: 1px solid rgba(255, 255, 255, 0.12) !important;   color: var(--text-muted, #9F9F9F) !important;   font-size: 14px !important;   font-weight: 500 !important;   display: inline-flex !important;   align-items: center !important;   justify-content: center !important;   padding: 0 !important;   box-shadow: none !important;   transition: all 0.2s ease !important; } .article-page-btn:hover:not(:disabled) {   border-color: rgba(255, 255, 255, 0.35) !important;   color: var(--text-white) !important; } .article-page-btn.active {   border-color: var(--primary-color) !important;   color: var(--primary-color) !important;   background-color: rgba(196, 0, 14, 0.08) !important;   font-weight: 600 !important; } .article-page-btn:disabled, .article-page-btn.disabled {   opacity: 0.3 !important; }