/* General Light Theme*/
/* Dark Mode */
body {
font-family: 'Inter', sans-serif;
transition: background-color 0.3s, color 0.3s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-top: 100px;
background-color: #fcfcfc;
overflow-x: hidden;
}

p, h1, h2, h3, h4, h5 {
color: #000000;
}

p {
text-align: justify;
}

strong {
color: #000000
}

.dark strong {
color: #fff
}

.container {
max-width: 1300px;
}

.extLink {
color: #000;
text-decoration: none;
}

.extLink:hover {
color: #193cfc;
cursor: pointer;
text-decoration: underline;
}

.dark .extLink {
color: #fff;
text-decoration: none;
}

.dark .extLink:hover {
color: #193cfc;
cursor: pointer;
text-decoration: underline;
}

/* General Dark Theme*/
.dark body {
background-color: #111827;
color: #f9fafb;
}

.dark p,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark span
{
color: #fff;
}

.text-nowrap {
white-space: nowrap;
}

/* button or redirect link */
.show-all-btn {
font-size:15px;
font-weight: 500;
transition: color 0.3s, transform 0.3s;
}

.show-all-btn:hover {
color: #D31014;
transform: translateX(4px);
}

.dark .show-all-btn {
color: #fff;
transition: color 0.3s, transform 0.3s;
}

.dark .show-all-btn:hover {
color: #D31014;
}

.news-all-btn {
font-size:15px;
font-weight: 500;
transition: color 0.3s, transform 0.3s;
}

.news-all-btn:hover {
color: #D31014;
background-color: #fff;
transform: translateX(4px);
}

.dark .news-all-btn {
color: #fff;
}

.dark .news-all-btn:hover {
color: #D31014;
}

.close-btn {
font-size: 1rem;
font-weight: 500;
color: #fff;
transition: color 0.3s, transform 0.3s;
}

.close-btn:hover {
color: #b80f13;
transform: translateX(4px);
}

.dark .close-btn {
color: #fff;
}

.dark .close-btn:hover {
color: #D31014;
}
/* mctl btn */

/* #Header First Layer */
/* ***so far: untuk title alert pakai inline style, dropdown-item/menu */
.dark .content-box {
background-color: #374151 !important;
color: #f9fafb !important;
}

.header-top{
background-color: #fcfcfc;
border-bottom: 1px solid #fafafa;
}

.dark .header-top {
background-color: #1f2937;
border-bottom: 1px solid #374151;
}

@media (max-width: 1157px) {
.header-top {
display: none !important;
}
}

.header-nav-top .nav-link {
color: #919191;
font-size: 0.875rem;
transition: color 0.2s;
}

.dark .header-nav-top .nav-link {
color: #fff;
font-size: 0.875rem;
transition: color 0.2s;
}

.header-nav-top .nav-link:hover {
color: #313372;
}

.nav-link{
color: #1D1E44;
}

.nav-link:hover{
color: #4B5563;
}

html.dark .nav-link{
color: #fff;
}

html.dark .nav-link:hover{
color: #4B5563;
}

.custom-nav-link {
color: #495057;
}

.custom-nav-link.active {
color: #1D1E44;
font-weight: 700;
}

/* news-alert-blink */
@keyframes blink {
0% { opacity: 1; }
100% { opacity: 1; }
}
.blink-icon {
animation: blink 1.5s infinite;
}

.flag {
width: 20px;
height: 14px;
display: inline-block;
background-size: cover;
}

.flag-gb { background-image: url('/img/flag-gb.svg'); }
.flag-us { background-image: url('/img/flag-us.svg'); }
.flag-my { background-image: url('/img/flag-my.svg'); }

.dark .header-nav-top .nav-link {
color: #fff;
}

/* Accessibility Thing */
.visually-hidden-focusable {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

.visually-hidden-focusable:focus {
left: 1rem;
top: 1rem;
width: 250px;
height: 300px;
background: #fff;
padding: .5rem 1rem;
z-index: 2000;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Theme Switch */
.theme-switch {
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.theme-switch input { display: none; }

.theme-switch .slider {
position: relative;
width: 50px;
height: 26px;
background-color: #DEDEDE;
border-radius: 20px;
transition: background-color 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-switch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.theme-switch input {
display: none;
}

.theme-switch .slider {
position: relative;
width: 46px;
height: 24px;
background-color: #cfd1d4;
border-radius: 34px;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

.theme-switch .slider::before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
top: 3px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .slider {
background-color: #DEDEDE;
}
.theme-switch input:checked + .slider::before {
transform: translateX(22px);
}

.theme-switch .sun-icon,
.theme-switch .moon-icon {
font-size: 13px;
z-index: 1;
transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.theme-switch .sun-icon {
color: #facc15;
opacity: 1;
}

.theme-switch .moon-icon {
color: #cbd5e1;
opacity: 0;
}

.theme-switch input:checked + .slider .sun-icon {
opacity: 0;
transform: scale(0.6);
}

.theme-switch input:checked + .slider .moon-icon {
opacity: 1;
transform: scale(1);
}

.dark .theme-switch .slider {
background-color: #334155;
}
/* THEME END */

/* #Header Second Layer */
/* Logo Switching */
/*  hidden dark logo */
.navbar-brand .logo-dark {
display: none;
}

.dark .navbar-brand .logo-light {
display: none;
}

.dark .navbar-brand .logo-dark {
display: block;
}

.navbar-brand img {
transition: opacity 0.3s ease;
}

.header-main-nav {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark .header-main-nav {
background-color: #1f2937;
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

/* Nav-Drawer */
.drawer-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1040;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.is-open {
visibility: visible;
opacity: 0.6;
}

.mobile-drawer {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 90vw;
max-width: 320px;
background-color: #ffffff;
box-shadow: -6px 0 15px rgba(0, 0, 0, 0.2);
z-index: 1041;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
visibility: hidden;
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}

.mobile-drawer.is-open {
transform: translateX(0);
visibility: visible;
}

@media (min-width: 576px) {
.mobile-drawer {
max-width: 400px;
}
}

.drawer-nav-link {
display: flex;
align-items: center;
padding: 0.85rem 1rem;
border-radius: 0.75rem;
color: #495057;
font-weight: 500;
transition: all 0.2s ease-in-out;
text-decoration: none;
}

.drawer-nav-link:hover {
background-color: #eef2ff;
color: #4338ca !important;
}

/*.drawer-nav-link.active {
background-color: #4f46e5;
color: #ffffff !important;
font-weight: 700;
box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
}

.drawer-nav-link.active i {
font-weight: 700 !important;
}*/

/* Language */
.drawer-language a {
text-decoration: none;
font-weight: 500;
color: #6b7280;
padding: 2px 4px;
}

.drawer-language span {
margin: 0 6px;
color: #9ca3af;
}

.drawer-language a.active-lang {
color: #2563eb;
font-weight: 700;
}

.drawer-preferences-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.drawer-pref-item {
display: flex;
align-items: center;
font-size: 0.9rem;
font-weight: 500;
color: #4b5563;
text-decoration: none;
}

.drawer-pref-item:hover {
color: #2563eb;
}

/* Language */
.drawer-language a {
text-decoration: none;
font-weight: 600;
color: #6b7280;
}

.drawer-language span {
margin: 0 6px;
color: #9ca3af;
}

.drawer-language a.active-lang {
color: #2563eb;
}

/* Homepage */
.img-fluid {
max-width: 100%;
height: 100%;
}

a.d-block img:hover {
transform: scale(1.02);
transition: transform 0.3s ease;
}

/* NCTL Section */
.nctl-v3-wrapper {
display: flex;
justify-content: center;
margin-bottom: 35px;
padding: 0 10px;
min-height: 120px;
}

.nctl-disabled {
opacity: 0.5;
filter: grayscale(1);
}

.nctl-desc,
.nctl-divider {
    display: none;
}

.nctl-level.nctl-active .nctl-desc,
.nctl-level.nctl-active .nctl-divider {
    display: block;
}

@keyframes blink-icon {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.2; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}

.blink-icon {
animation: blink 3s infinite;
}

@keyframes blink {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}

/* Main container */
.nctl-main {
border-radius: 500px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0 30px;
width: 100%;
max-width:1300px;
gap: 20px;
transition: all 0.3s ease;
overflow: visible;
margin-top: 50px;
}

/* Title */
.nctl-title {
margin-left: 10px;
font-weight: 600;
font-size: 20px;
white-space: nowrap; /* u sebaris */
flex-shrink: 0; /* no shrink */
}

/* Levels */
.nctl-levels {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
flex-grow: 1;
}

/* the-base */
.nctl-level {
display: flex;
align-items: center;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 999px;
flex-shrink: 0;
position: relative;
z-index: 2;
}

/* Tooltip */
.nctl-level[data-tooltip] {
position: relative;
}

.nctl-level:not(.nctl-active)[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: auto;
top: 120%;
left: 50%;
transform: translateX(-50%);
background-color: #1f2937;
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
line-height: 1.4;
max-width: 360px;
min-width: 260px;
white-space: normal;
text-align: justify;
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: opacity 0.2s ease, transform 0.2s ease;
}

.nctl-level:not(.nctl-active)[data-tooltip]::before {
content: "";
position: absolute;
bottom: auto;
top: 110%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent #1f2937 transparent;
opacity: 0;
transition: opacity 0.2s ease;
}

.nctl-level[data-tooltip]:hover::after,
.nctl-level[data-tooltip]:hover::before,
.nctl-level[data-tooltip]:focus-visible::after,
.nctl-level[data-tooltip]:focus-visible::before {
opacity: 1;
}

.nctl-level.nctl-active::after,
.nctl-level.nctl-active::before {
    display: none !important;
}

/* Active pill */
.nctl-active {
color: #000;
padding: 8px 12px;
flex: 1 1 auto;
min-width: 250px;
max-width: 70%;
justify-content: flex-start;
gap: 8px;
flex-wrap: nowrap;
}

@keyframes blinkIcon {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.2; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}

.nctl-active i {
font-size: 12px;
color: #fff;
flex-shrink: 0;
animation: blinkIcon 3s infinite;
}
.nctl-active b {
font-size: 12px;
flex-shrink: 0;
}

.nctl-divider {
width: 1px;
height: 20px;
background-color: #000;
flex-shrink: 0;
}

.nctl-desc {
font-size: 10px;
font-weight: 400;
color: #000;
white-space: normal;
line-height: 1.3;
text-align: justify;
align-text: center
max-width: 250px;
flex-grow: 1;
margin: 0;
}

.nctl-levels,
.nctl-level {
overflow: visible !important;
}

/* Circle */
.nctl-circle {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
font-size: 7px;
font-weight: 400;
color: #3b3939;
opacity: 0.8;
text-align: center;
padding: 3px;
transition: all 0.3s ease;
line-height: 1;
}

.nctl-circle i {
font-size: 16px;
color: #3b3939;
}

.nctl-circle span {
display: block;
}

.nctl-low {
background-color: #0fe27c;
}

.nctl-moderate {
background-color: #5fd2f4;
}

.nctl-caution {
background-color: #ffeb70;
}

.nctl-high {
background-color: #f5b84b;
}

.nctl-critical {
background-color: #f35b5b;
}
.active-low {
background-color: #0fe27c;
}

.active-moderate {
background-color: #5fd2f4;
}

.active-caution {
background-color: #ffeb70;
}

.active-high {
background-color: #f5b84b;
}

.active-critical {
background-color: #f35b5b;
}

/* Dark Mode NCTL */
.dark .nctl-main {
border-radius: 500px;
background: #1f2937;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
color: #e3f8ff;
border: 1px solid rgba(0,255,255,0.15);
border: 1px solid #1f2937;
transition: all 0.4s ease;
}

.dark .nctl-title {
color: #fff;
}
.dark .nctl-divider {
color: #000;
}

.dark .nctl-desc {
color: #000;
}

.dark .nctl-circle {
font-weight: 400;
color: #3b3939;
transition: all 0.3s ease;
}

.dark .nctl-circle i {
color: #3b3939;
}

.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
}

/* Neon/glow effect-removed */
/* LOW */
.dark .nctl-low,
.dark .active-low {
background-color: #00ff9d;
color: #000;
}

/* MODERATE */
.dark .nctl-moderate{}
.dark .active-moderate {
background-color: #00b8ff;
color: #000;
}

/* CAUTION */
.dark .nctl-caution,
.dark .active-caution {
background-color: #ffd500;
color: #000;
}

/* HIGH */
.dark .nctl-high,
.dark .active-high {
background-color: #ff7a00;
color: #000;
}

/* CRITICAL */
.dark .nctl-critical,
.dark .active-critical {
background-color: #ff2d55;
color: #000;
}

.dark .nctl-active {
border-radius: 999px;
padding: 10px 14px;
flex: 1 1 auto;
justify-content: flex-start;
align-items: center;
transition: all 0.3s ease;
border: none;
}

.dark .active-low.nctl-active {
background-color: #00ff9d;
color: #000;
}
.dark .active-moderate.nctl-active {
background-color: #00b8ff;
color: #000;
}
.dark .active-caution.nctl-active {
background-color: #ffd500;
color: #000;
}
.dark .active-high.nctl-active {
background-color: #ff7a00;
color: #000;
}
.dark .active-critical.nctl-active {
background-color: #ff2d55;
color: #000;
}

@keyframes neonPulse {
0% { text-shadow: 0 0 4px currentColor, 0 0 10px currentColor; opacity: 1; }
50% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; opacity: 0.8; }
100% { text-shadow: 0 0 4px currentColor, 0 0 10px currentColor; opacity: 1; }
}

.dark .nctl-active i {
font-size: 14px;
animation: neonPulse 2.5s infinite;
}

/* Responsive */
@media (max-width: 1024px) {
.nctl-main {
flex-direction: column;
/*align-items: stretch;*/
border-radius: 20px;
padding: 15px;
gap: 10px;
flex-wrap: wrap;
}
.nctl-title {
font-size: clamp(16px, 2vw, 20px);
}

.nctl-levels {
justify-content: space-around;
flex-wrap: wrap;
gap: 5px;
width: 100%;
}

.nctl-active {
width: 100%;
min-width: 100%;
max-width: 100%;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
gap: 5px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.nctl-active b {
font-size: 16px;
}

.nctl-active i {
font-size: 18px;
}

.nctl-level.nctl-active .nctl-divider {
display: none;
}

.nctl-level.nctl-active {
text-align: center;
font-size: 11px;
max-width: 90%;
}

.nctl-circle {
width: 50px;
height: 50px;
padding: 5px;
}
}

@media (max-width: 480px) {
.nctl-levels {
gap: 2px;
}
.nctl-circle {
width: 45px;
height: 45px;
font-size: 6px;
}
.nctl-circle i { font-size: 14px; }
}
/* end nctl-level*/

/* BANNER-SECTION */
.nc4-section-banner {
aspect-ratio: 16 / 8;
width: 100%;
max-width: 1300px;
max-height:450px;
margin: auto;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-wrap: nowrap;
position: relative;
overflow: hidden;
}

/* LEFT SIDE*/
.banner-left-content {
flex: 0 0 55%;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(20px,4vw,40px);
/*padding: 40px 30px;*/
/*position: relative;
z-index: 2;
text-align: left;*/
}

.nc4-hero-title {
font-size: clamp(22px, 2vw + 10px, 32px);
line-height: 1.2;
/*margin-left: 20px;*/
margin-bottom: 15px;
color: #000;
font-weight: 700;
max-width: 90%;
}

.nc4-hero-description {
font-size: clamp(14px, 1vw + 6px, 18px);
color: rgba(0, 0, 0, 0.6);
/*margin-left: 20px;*/
max-width: 90%;
}

/* IMAGE */
.banner-right-section-image-placeholder {
flex: 0 0 45%;
position: relative;
background-color: #fff;
border-radius: 0 20px 20px 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
height: 100%;
width: 100%;
}

.banner-faded-image {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}

.banner-full-image,
.banner-faded-image img,
.banner-faded-image video {
width: 100%;
height: 100%;
object-fit: cover;
}

.banner-faded-image img,
.banner-faded-image video
{
opacity: 0.5;
pointer-events: none;
user-select: none;
}

/* FADE OVERLAY */
.white-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg,#fff 0%,rgba(255, 255, 255, 0.5) 20%,rgba(255, 255, 255, 0) 60%);
z-index: 5;
pointer-events: none;
}

/* ARROW BUTTON */
.banner-icon-container {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 10;
cursor: pointer;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
color: #191A3B;
font-size: 1rem;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.25s ease;
}

.banner-icon-container.next {
right: 30px;
}

.banner-icon-container.prev {
left: 30px;
}

.banner-icon-container.prev::after {
content: '<';
color: #1D1E44;
font-size: 20px;
font-weight: medium;
line-height: 1;
}

.banner-icon-container.next::after {
content: '>';
color: #1D1E44;
font-size: 20px;
font-weight: medium;
line-height: 1;
}

.banner-icon-container.prev:hover::after,
.banner-icon-container.next:hover::after {
color: #cb2228;
}

.banner-icon-container:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
}

.banner-icon-container:active {
transform: scale(0.95);
}

/* Hide nav */
.banner-icon-container {
opacity: 0;
transition: opacity 0.4s ease;
}

.nc4-section-banner:hover .banner-icon-container,
.banner-icon-container:focus-visible {
opacity: 1;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}

.banner-slide {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
opacity: 0;
transition: opacity 1s ease-in-out;
position: absolute;
inset: 0;
/*z-index: 0;*/
}

.banner-slide.active {
opacity: 1;
z-index: 1;
}

.banner-full-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}

/* responsive */
@media (max-width: 992px) {
.banner-left-content {
flex: 1 1 55%;
padding: 30px 20px;
}

.banner-right-section-image-placeholder {
flex: 0 0 45%;
min-height: auto;
height: 100%;
}

.nc4-hero-title,
.nc4-hero-description {
/*margin-left: 0;*/
max-width: 100%;
}
}

@media (max-width: 768px) {
.nc4-section-banner{
aspect-ratio: 16 / 9;
}

.banner-left-content {
flex: 0 0 55%;
padding: 20px;
text-align: left;
align-items: flex-start;
}

.banner-right-section-image-placeholder {
flex: 0 0 45%;
min-height: auto;
height: 100%;
}

.nc4-hero-title {
font-size: clamp(18px, 4vw, 22px);
margin-left: 0;
}

.nc4-hero-description {
font-size: clamp(13px, 3vw, 16px);
margin-left: 0;
}

.banner-icon-container {
opacity: 1;
}
}

@media (max-width: 576px) {
/*.nc4-section-banner{
aspect-ratio: 16 / 8;
}*/

.banner-left-content {
flex: 0 0 55%;
}

.banner-right-section-image-placeholder {
flex: 0 0 45%;
/*min-height: auto;
height: 100%*/
}

.nc4-hero-title {
font-size: 20px;
}

.nc4-hero-description {
font-size: 14px;
}
}

@media (max-width: 480px) {
/*.nc4-section-banner{
aspect-ratio: 16 / 8;
}*/

.banner-left-content {
flex: 0 0 55%;
}

.banner-right-section-image-placeholder {
flex: 0 0 45%;
/*min-height: auto;
height: 100%*/
}

.nc4-hero-title {
font-size: 18px;
}

.nc4-hero-description {
font-size: 13px;
}
}
/* End Banner Section */

/* MCTL-SECTION */
.mctl-container {
margin-top: 35px;
width: 100%;
max-width: 1300px;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
/*background-image: url('../img/redblue-bg-rectangle.jpg');*/
background-image: url('../img/bg-test-1.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.mctl-header {
padding: 40px 50px;
}

.main-title-light {
font-size: clamp(26px, 3vw, 36px);
font-weight: 800;
color: #fff;
}

.time-frame-nav {
background: rgba(15, 23, 42, 0.4);
padding: 6px;
border-radius: 14px;
backdrop-filter: blur(10px);
cursor: pointer;
}

.mctl-nav-item {
border-radius: 10px;
padding: 6px 18px;
font-size: 14px;
font-weight: 500;
color: #cbd5e1;
text-decoration: none;
cursor: pointer;
}

.mctl-nav-item.active {
background: #fff;
color: #111;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,.15);
border-bottom: none;
text-decoration: none;
}

.mctl-grid {
padding: 0 40px;
}

/* white background */
.mctl-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
padding: 32px;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mctl-title {
display: inline-block;
white-space: normal;
word-break: break-word;
text-align: left;
text-transform: uppercase;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
color: #000;
}

.mctl-value {
font-size: 42px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
color:#000;
}

.mctl-card:hover {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
padding: 32px;
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 24px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mctl-card:hover .mctl-title,
.mctl-card:hover .mctl-value {
color: #ffffff;
}

.mctl-card:hover .mctl-icon {
background: rgba(211,16,20,0.25);
}

.dark .mctl-card {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(255,255,255,0.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),
        0 10px 30px rgba(0,0,0,0.35);
}

.dark .mctl-card:hover {
transform: translateY(-10px);
background: rgba(30, 41, 59, 0.6);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* card-header */
.mctl-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.mctl-card-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
}

.mctl-icon {
width: 70px;
height: 70px;
padding: 10px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.4);
}

.dark .mctl-title {
display: inline-block;
white-space: normal;
word-break: break-word;
text-align: left;
text-transform: uppercase;
font-size: 22px;
line-height:1.25;
font-weight: 700;
color: #94a3b8;
}

.dark .mctl-value {
font-size: 42px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
color: #ffffff;
}

/* Trend */
/*.mctl-change {
font-size: 18px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
}*/

.mctl-change {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
min-height: 36px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
border: 2px solid transparent;
}

.text-up {
color: #ff5252;
font-weight: 400;
background: rgba(248, 113, 113, 0.1);
/*color: #f87171 !important;*/
border: 1px solid rgba(248, 113, 113, 0.2);
}

.text-down {
color: #00c853;
font-weight: 400;
background: rgba(52, 211, 153, 0.1);
/*color: #34d399 !important;*/
border: 1px solid rgba(52, 211, 153, 0.2);
}

.text-stable {
color: #9e9e9e;
font-weight: 400;
}

/* Action */
.mctl-action-bar {
margin: 20px 0;
display: flex;
justify-content: flex-end;
gap: 10px
}

/* Hide Logic */
.hidden {
display: none !important;
}

/* Tabs */
.tab-pane {
display: none !important;
}
.tab-pane.active {
display: block !important;
}
@media (max-width:768px){
.mctl-title{
font-size:15px;
line-height:1.35;
}

.mctl-value{
font-size:32px;
}

.mctl-change{
font-size:12px;
padding:4px 10px;
}

.mctl-icon{
width:50px;
height:50px;
}

.mctl-nav-item{
font-size:12px;
padding:5px 12px;
white-space:nowrap;
}

.time-frame-nav{
display:flex;
flex-wrap:nowrap;
}

}
/* End Mctl Section */

/* Latest News Section - Homepage */
.news-section {
padding: 20px 0 40px;
}

.news-section-header-title {
font-size: clamp(26px, 3vw, 36px);
font-weight: 800;
color: #000;
margin-top: 30px;
padding-top: 30px;
/*margin-bottom: 12px;*/
}

.dark .news-section-header-title {
color: #ffffff;
}

.news-section-grid {
margin-top: 32px;
}

/* news card */
.news-section-card {
position: relative;
overflow: hidden;
height: 100%;
padding: 28px;
border-radius: 24px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.04);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),box-shadow 0.35s ease;
}

.news-section-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.news-section-card-details {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
text-align: left;
}

.card-para {
font-size: 14px;
line-height: 1.5;
/*color: #6b7280;*/
/*text-align: justify;*/
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* overlay */
.overlay {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.overlay::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(-45deg, rgba(29, 30, 68, 0.5), rgba(211, 16, 20, 0.5));
transform: scale(0);
transition: transform 0.5s ease;
}

.news-section-card:hover .overlay {
opacity: 1;
}

.news-section-card:hover .overlay::after {
transform: scale(2);
}

/* Read more btn */
.card-btn {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
padding: 10px 22px;
font-size: 16px;
font-weight: 600;
background: #ffffff;
color: #111827;
border-radius: 999px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
pointer-events: none;
}

.news-section-card:hover .card-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

.news-section-card-link:focus-visible .overlay,
.news-section-card-link:focus-visible .card-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

/* Dark mode */
.dark .news-section-card {
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);

box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 12px 30px rgba(0, 0, 0, 0.35);
}

.dark .news-section-card-newsContent {
color: #e5e7eb;
}

.dark .overlay {
background: rgba(0, 0, 0, 0.65);
}

.dark .card-btn {
background: #ffffff;
color: #111827;
}
/* End news section */

/* Footer Section */
.nc4-footer {
background-color: #151b3d;
border-radius: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 1300px;
margin: auto;
padding: 30px 30px 30px 30px;
}

.nc4-footer h5,
.nc4-footer p,
.nc4-footer a,
.nc4-footer li,
.nc4-footer span {
color: #fff;
}

.nc4-footer a:hover {
color: #193cfc;
}

.footer-upper{
display: flex;
flex-wrap: wrap;
gap: 80px;
justify-content: space-evenly;
padding: 30px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 25px;
align-items: center;
font-size: 13px;
padding-top: 10px;
}

.footer-content {
display: flex;
flex-wrap: wrap;
gap: 25px;
padding: 20px 10px;
}

.footer-logo img {
margin: 30px 0;
padding-top: 40px;
width: 400px;
max-width: 100%;
}

.footer-section h5 {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}

.footer-section a {
color: #fff;
text-decoration: none;
}

.footer-section a:hover {
text-decoration: none;
}

.related-sites ul {
list-style: none;
padding: 0;
margin: 0;
}

.related-sites ul li {
margin-bottom: 5px;
}

.counter-row {
display: flex;
align-items: center;
margin-bottom: 8px;
}

.counter-row span {
width: 60px;
font-size: 14px;
}

.counter-box {
background-color: #fff;
color: #000;
border-radius: 4px;
padding: 3px 8px;
letter-spacing: 4px;
font-weight: 600;
}

.footer-bottom ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
}

.footer-bottom p {
margin: 0;
}

.footer-links {
list-style: none;
display: flex;
gap: 5px;
padding: 0;
margin: 0;
}

.footer-links a {
color: #fff;
text-decoration: none;
}

.footer-links a:hover {
text-decoration: none;
}

/* Responsive */
@media (max-width: 992px) {
.nc4-footer {
padding: 20px;
border-radius: 15px;
}

.footer-content {
flex-direction: column;
align-items: center;
text-align: center;
}

.footer-section {
margin-bottom: 10px;
}

.footer-bottom {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
/* End of Footer Section

/* A&A, TTMA & GAPTC Section */
.multiple-menu-container {
width: 100%;
max-width: 1300px;
margin: 25px auto 25px;
border-radius: 20px;
overflow: hidden;
background: #e2e2e2;
/*background-image: url('../img/asap-abu.png');*/
background-image: url('../img/bg-test-3.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #191A3B;
padding: 30px 40px 50px;
transition: background-color 0.3s ease;
}

/* HEADER NAVIGATION */
.multiple-menu-header {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}

.menus-frame-nav {
gap: 25px;
padding-bottom: 10px;
}

.multi-nav-item {
padding: 10px 15px;
text-decoration: none;
color: #464646;
font-weight: 500;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
font-size: clamp(14px, 1vw + 8px, 16px);
}

.multi-nav-item:hover {
color: #191A3B;
}

.multi-nav-item.active {
color: #191A3B;
font-weight: 600;
border-bottom-color: #b80f13;
background-color: transparent !important;
}

.tab-content-container {
margin-top: 30px;
}

.tab-content {
display: none;
opacity: 0;
transition: opacity 0.25s ease;
}

.tab-content.active {
display: block;
opacity: 1;
}

/* Dark Mode */
.dark .multiple-menu-container {
background: #191A3B;
background-image: url('../img/bg-test-3.png');
background-size: cover;
color: #000000;
}

.dark .multi-nav-item {
color: #464646;
}
.dark .multi-nav-item:hover {
color: #193cfc;
}
.dark .multi-nav-item.active {
color: #000;
font-weight: 700;
border-bottom-color: #b80f13;
}

/* Responsiveness */
@media (max-width: 992px) {
.multiple-menu-container {
padding: 20px;
}
}

@media (max-width: 576px) {
.multiple-menu-container {
padding: 15px;
border-radius: 15px;
}
}

/* Alert&Advisories - Home */
.aa-card {
position: relative;
overflow: hidden;
height: 100%;
padding: 28px;
border-radius: 24px;
background: #fff;
border: 1px solid rgba(0,0,0,0.04);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
transition:transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),box-shadow 0.35s ease;
}

.aa-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.aa-card .card-content-details {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
text-align: left;
}

.aa-card:hover .overlay {
opacity: 1;
}

.aa-card:hover .overlay::after {
transform: scale(2);
}

.aa-card-link:focus-visible .overlay,
.aa-card-link:focus-visible .card-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

.aa-card:hover .card-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

/* content */
.card-id {
font-size: 12px;
letter-spacing: .08em;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
}

.dark .card-id {
color: #fff;
}

.card-title {
font-size: 18px;
font-weight: 700;
color: #000000;
min-height: 25px;
line-height: 1.3;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-transform: none;
}

.dark .card-title{
color: #fff;
}

.card-title:hover{
font-weight: 800;
}

.dark .card-title:hover{
font-weight: 800;
}

.card-meta {
font-size: 12px;
color: #9ca3af;
/*color: #888;*/
}

.dark .card-meta {
color: #888;
}

.card-meta i {
color: #b71c1c;
}

.dark .card-meta i {
color: #b71c1c;
}

/* aa subtle overlay~ */
#alert-advisories .overlay {
background: linear-gradient(to bottom,rgba(15, 23, 42, 0.35),rgba(15, 23, 42, 0.55)
);
}
#alert-advisories .overlay::after {
transform: scale(1);
}
#alert-advisories .aa-card:hover .card-content-details {
position: relative;
z-index: 2;
color: #000;
}
/* end of AA-Home */

/* MALWARE CHART & TABLE */
.meta-date {
font-size: 12px;
color: #9ca3af;
}

.dark .meta-date {
color: #888;
}

.meta-date i {
color: #b71c1c;
padding-right: 3px;
}

.dark .datee i {
color: #b71c1c;
}

.malware-chart-placeholder,
.malware-table-container {
background: rgba(50, 0, 0, 0.05);
padding: 20px;
border-radius: 10px;
}

.malware-table,
.apt-table {
width: 100%;
border-collapse: collapse;
color: #000000;
font-size: 0.95em;
}

.malware-table th,
.apt-table th {
background-color: rgba(255, 255, 255, 0.1);
color: #000000;
padding: 10px;
font-weight: 600;
}

.malware-table td,
.apt-table td {
border-top: 1px solid rgba(18, 17, 17, 0.1);
padding: 8px 10px;
text-align: left;
}

/* APT CAMPAIGN */
.apt-table-container {
overflow-x: auto;
background: rgba(50, 0, 0, 0.05);
border-radius: 10px;
padding: 20px;
}

/* DARK MODE */
/* Alert & Advisories */
.dark .aa-card {
background: rgba(15,23,42,0.45);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.15);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.04),
0 12px 30px rgba(0,0,0,0.35);
}

/* Table Malware & APT */
/*.dark .malware-chart-placeholder,
.dark .malware-table-container,
.dark .apt-table-container {
background: rgba(255, 255, 255, 0.05);
}*/

.dark .malware-table,
.dark .apt-table {
color: #000000;
}

.dark .malware-table th,
.dark .apt-table th {
color: #000000;
}

.dark .malware-table td,
.dark .apt-table td {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* RESPONSIVENESS */
@media (max-width: 992px) {
.multiple-menu-container {
padding: 20px;
}

.menus-frame-nav {
gap: 15px;
}
}

@media (max-width: 576px) {
.multiple-menu-container {
padding: 15px;
border-radius: 15px;
}

.multi-nav-item {
font-size: 14px;
padding: 8px 10px;
}

.malware-table,
.apt-table {
font-size: 0.9em;
}
}

/* chart */
.malware-chart-canvas {
max-height: 360px;
padding: 10px;
}

.malware-chart-canvas + div {
margin-top: 10px;
}

.chartjs-render-monitor {
border-radius: 20px !important;
}

.chartjs-tooltip {
font-size: 12px !important;
}

.malware-chart-canvas {
    max-height: 420px;
}

.dark .chartjs-tooltip {
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* END OF A&A, TTMA & GAPTC Section */

/* Other Pages */
.others-page-container {
width: 100%;
max-width: 1300px;
margin:30px auto 30px;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #f8f9fa;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000000;
padding: 30px 40px 50px;
}

.others-page-header {
display: flex;
justify-content: start;
align-items: start;
flex-wrap: wrap;
margin-bottom: 20px;
color: #000000;
}

.others-section-title {
font-size: clamp(22px, 2vw + 10px, 27px);
font-weight: 700;
max-width: 80%;
color: #191A3B;
}

.news-detail-content{
text-align: justify;
padding: 10px 75px 10px 25px;
line-height: 1.5;
}

.alert-detail-content{
text-align: justify;
padding: 10px 75px 10px 25px;
line-height: 1.5;
}

.others-row {
margin-top: 0;
}

.archive-page-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
color: #000000;
}

.dark .archive-page-header {
color: #fff;
}

.archive-page-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.filter-toggle-btn {
border: 1px solid #dee2e6;
background: #ffffff;
padding: 8px 16px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
}

.filter-toggle-btn:hover {
background: #f8f9fa;
}

#filterCollapse {
transition: height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}

#filterCollapse.collapsing {
opacity: 0;
transform: translateY(-8px);
}

#filterCollapse.show {
opacity: 1;
transform: translateY(0);
}

/*#alertFilterCollapse {
transition: height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}

#alertFilterCollapse.collapsing {
opacity: 0;
transform: translateY(-8px);
}

#alertFilterCollapse.show {
opacity: 1;
transform: translateY(0);
}*/

.filter-dropdown-card {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}


@media (max-width: 576px) {
.archive-page-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}

/* Dark Mode */
.dark .others-page-container {
width: 100%;
max-width: 1300px;
margin:30px auto 30px;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #1f2937;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
padding: 30px 40px 50px;
}

.dark .others-page-header {
color: #fff;
}

.dark .others-section-title {
color: #191A3B;
}

.dark .others-row {
margin-top: 0;
}
/* End Other Page */

/* About Page */
.dark .function-card:hover {
box-shadow: 0 10px 30px rgba(77, 171, 247, 0.25) !important;
}

/* Alerts Page */
/*.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}*/

/* ALERT & ADVISORIES ARCHIVE */
.aa-card-archive {
padding: 25px;
height: 100%;
background: #fff;
color: #000;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}

.aa-card-archive:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.aa-card-archive:hover .overlay {
opacity: 1;
}

.aa-card-archive-link:focus-visible .overlay,
.aa-card-archive-link:focus-visible .card-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}


.aa-card-archive:hover .overlay::after {
transform: scale(2);
}

.aa-card-archive:hover .card-btn {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
font-size: 14px;
}

.dark .aa-card-archive {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border-radius: 15px;
color: #fff;
transition: all 0.3s ease;
height: 100%;
}

.dark .aa-card-archive:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(-5px);
}

.card-body-archive {
padding: 0;
text-align: left;
display: flex;
flex-direction: column;
height: 100%;
}

/*.dark .card-body-archive {
}*/

/* 3 Cards per Row */
.aa-row-archive {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.aa-row-archive .col-lg-3 {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
}

@media (max-width: 991.98px) {
    .aa-row-archive .col-lg-3 {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 767.98px) {
    .aa-row-archive .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* End Here */

.main-content {
color: #000000;
background-color: #F2F2F2;
border-radius: 10px;
padding: 50px;
}

/* New-filter-style */
.filter-toggle-btn {
background-color: #fff;
color: var(--text-dark);
border: 1px solid #dee2e6;
padding: 8px 18px;
border-radius: 30px;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
height: 40px;
}

.filter-toggle-btn:hover {
background-color: var(--bg-light);
border-color: var(--primary-color);
color: var(--primary-color);
}

.filter-toggle-btn.active {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}

.filter-content-card {
background: #fff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border: none;
margin-top: 15px;
}

.filter-form {
display: flex;
align-items: flex-end;
gap: 15px;
flex-wrap: wrap;
}

.filter-group {
flex: 1;
min-width: 200px;
}

.filter-group label {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-muted);
margin-bottom: 8px;
display: block;
text-transform: uppercase;
}

.form-select-custom {
height: 45px;
border-radius: 10px;
border: 1px solid #e9ecef;
padding: 0 15px;
width: 100%;
background-color: #fcfcfc;
transition: all 0.3s;
}

.form-select-custom:focus {
border-color: var(--primary-color);
background-color: #fff;
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);
outline: none;
}

.btn-apply-filter {
background-color: var(--primary-color);
color: white;
border: none;
height: 45px;
padding: 0 30px;
border-radius: 10px;
font-weight: 600;
transition: 0.3s;
}

.btn-clear-filter {
background-color: #f8f9fa;
color: var(--text-muted);
border: 1px solid #dee2e6;
height: 45px;
width: 45px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

/* End-New-filter-style */
/* End of  Archive Section

/* CONTACT US SECTION */
.card-custom {
height: 100%;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: none;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),box-shadow 0.35s ease,background-color 0.35s ease;
}

.card-custom:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
background-color: #edf5ff;
/*border-top: 6px solid #D31014;*/
border: 1px solid #1D1E44;
}

.page-heading {
color: #1D1E44;
font-weight: 800;
letter-spacing: -0.05em;
}

.form-control {
background-color: ##F2F2F2;
border-color: #1D1E44;
color: #1D1E44;
transition: all 0.2s ease-in-out;
}

.form-control::placeholder {
color: #6c757d;
}

.form-control:focus {
border-color: #1D1E44;
box-shadow: 0 0 0 0.25rem rgba(211, 16, 20, 0.25);
background-color: #F2F2F2;
color: #1D1E44;
}

.contact-form .form-control,
.contact-form textarea {
max-width: 90%;
}

.btn-sndmesej {
color: #000;
font-weight: 600;
text-decoration: none;
padding: 4px 8px;
border-radius: 10px;
border: 1px solid #7a7a7a;
background-color: #fff;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-sndmesej:hover {
color: #D31014;
text-decoration: none;
transform: scale(1.01);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.dark .btn-sndmesej {
color: #1D1e44;
text-decoration: none;
background-color: #fff;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dark .btn-sndmesej:hover {
color: #D31014;
text-decoration: none;
transform: scale(1.01);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}


/* Dark Mode */
.dark .form-control {
background-color: #F2F2F2;
border-color: #1D1E44;
color: #000;
transition: all 0.2s ease-in-out;
}

.dark .form-control::placeholder {
color: #4D50B3;
}

.dark .form-control:focus {
border-color: #000;
box-shadow: 0 0 0 0.25rem rgba(211, 16, 20, 0.25);
background-color: #F2F2F2;
}

.dark .card-custom {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(12px);
color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),0 12px 30px rgba(0,0,0,0.35);
}

.dark .card-custom:hover{
background: rgba(30, 41, 59, 0.65);
transform: translateY(-6px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
border: 1px solid #D31014;

}
/* END CONTACT US SECTION */

/* FAQ SECTION */
.accordion-item {
border: none;
margin-bottom: 16px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
background: #ffffff;
}

.accordion-header {
border-bottom: none;
}

.accordion-button {
padding: 16px 20px;
font-size: 15px;
font-weight: 600;
color: #1f2937;
background-color: #ffffff;
border-radius: 16px;
box-shadow: none;
transition: background-color 0.25s ease,color 0.25s ease;
}

.accordion-button:hover {
background-color: #f5f9ff;
}

.accordion-button:not(.collapsed) {
background-color: #edf5ff;
color: #1f2937;
border-left: 4px solid #1D1E44;
border-right: 4px solid #1D1E44;
}

.accordion-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(29, 30, 68, 0.25);
}

.accordion-button:focus {
box-shadow: none;
}

.accordion-body {
padding: 18px 20px;
font-size: 14px;
line-height: 1.7;
color: #1D1E44;
background-color: #ffffff;
text-align: justify;
}

/* cta card */
.cta-card {
height: 100%;
padding: 24px;
border-radius: 20px;
background: #ffffff;
border: none;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),box-shadow 0.35s ease,background-color 0.35s ease;
}

.cta-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
background-color: #edf5ff;
border: 1px solid #1D1E44;
}

/* dark mode */
.dark .accordion-item {
background: rgba(15, 23, 42, 0.55);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04),0 12px 30px rgba(0,0,0,0.35);
}

.dark .accordion-button {
background: rgba(15, 23, 42, 0.45);
color: #f9fafb;
border: 1px solid rgba(255, 255, 255, 0.12);
}

.dark .accordion-button:hover {
background: rgba(30, 41, 59, 0.55);
}

.dark .accordion-button:not(.collapsed) {
background: rgba(30, 41, 59, 0.75);
color: #ffffff;
border-left: 4px solid #D31014;
border-right: 4px solid #D31014;
}

.dark .accordion-button:focus-visible {
box-shadow: 0 0 0 3px rgba(211, 16, 20, 0.35);
}

.dark .accordion-body {
background: rgba(15, 23, 42, 0.45);
color: #e5e7eb;
}

.dark .cta-card {
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(12px);
color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),0 12px 30px rgba(0,0,0,0.35);
}

.dark .cta-card:hover {
background: rgba(30, 41, 59, 0.65);
transform: translateY(-6px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45);
border: 1px solid #D31014;
}

@media (max-width: 768px) {
.cta-card {
padding: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.cta-card:hover {
transform: translateY(-4px);
}
}

@media (max-width: 480px) {
.accordion-button {
font-size: 14px;
padding: 14px 16px;
}

.accordion-body {
font-size: 13px;
}

.cta-card {
border-radius: 16px;
}
}
/* End FAQ Section */


/* Sub-Alert Page */
.alert-box {
background-color: #f9f9f9;
border-left: 6px solid #d52b1e;
color: #000000;
}

.alert-title {
color: #d52b1e;
}

.alert-icon {
color: #d52b1e;
}

.summary-box {
background-color: #edf5ff;
border-left: 6px solid #003366;
color: #000000;
}
.summary-title {
color: #003366;
}

/* Dark Mode */
.dark .alert-box {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
color: #fff;
border-left: 6px solid #ff5757;
}
.dark .alert-title {
color: #ff5757;
}
.dark .alert-icon {
color: #ff5757;
}

.dark .summary-box {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
color: #fff;
border-left: 6px solid #66a3ff;
}
.dark .summary-title {
color: #66a3ff;
}

.dark h4 {
color: #fff;
}
/* End of Sub-Alert Page */

/* Pop-up Messages */
.popup {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}

.popup-content {
background: #fff;
padding: 0;
border-radius: 15px;
animation: fadeIn .3s ease-in-out;
}

.popup-img {
height: auto;
max-height: 70vh;
width: 100%;
object-fit: contain;
}

.scam-modal {
background-color: #fff;
color: #1f2937;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: background-color 0.3s ease,color 0.3s ease
}

.scam-header {
background-color: #111827;
padding: 1.2rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}

.scam-header h5 {
margin: 0;
color: #fff;
font-weight: 600;
font-size: 1.05rem;
}

.scam-close-btn {
background: transparent;
border: none;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
color: #fff;
transition: opacity 0.2s ease;
}

.scam-close-btn:hover {
opacity: 0.6;
}

.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
}

/* Responsive popup modal */
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}

@media (max-width:576px) {
.modal-dialog{
max-width:85%;
margin: 1rem auto;
}

.scam-header {
padding: 0.8rem 1rem;
}

.scam-header h5 {
font-size: 0.75rem;
}

.scam-close-btn{
font-size: 0.95 rem;
}
}

/*.btn-close {
filter: invert(1);
}*/
/* End of Pop-up Messages */

/* policy */
.policy-section h5 {
margin-bottom: 0.75rem;
}

.policy-section ul li,
.policy-section ol li {
margin-bottom: 0.5rem;
}

/* Map */

/*random*/
.dark .form-label-filter{
color: #000;
}

.dark .filter-toggle-btn{
color: #000;
}