@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
    --primary: #dc2626;
    --secondary: #991b1b;
    --tertiary: #dc2626;
    --surface: #ffffff;
    --main-background: #fafafa;
    --font__pri-clr: #0f0f0f;
    --font__sec-clr: #4a4a4a;

    --header__bg: var(--primary);
    --header_logo__clr: #ffffff;
    --header_nav__clr: #ffffff;
    --header_nav__hover_clr: #fee2e2;

    --icon_circle__bg: var(--primary);
    --icon_circle__clr: #ffffff;

    --navlink__bg: #ffffff;
    --navlink__clr: var(--font__sec-clr);
    --navlink__hover-bg: #ffffff;
    --navlink__title-clr: var(--primary);
    --navlink_icon_hover__bg: var(--secondary);
    --navlink_icon_hover__clr: #ffffff;

    --search__bg: var(--primary);
    --search__clr: #0f0f0f;
    --search__input-placeholder-clr: #4a4a4a;
    --search__icon-fill: var(--secondary);
    --search__input-bg: #ffffff;

    --btn__bg-clr-pri: var(--primary);
    --btn__clr-pri: #ffffff;
    --btn__border-clr-pri: var(--secondary);

    --dropdown__bg: #ffffff;
    --dropdown__clr: var(--primary);
    --dropdown__border-clr: var(--secondary);
    --dropdown__hover-bg: var(--secondary);
    --dropdown__hover-clr: #ffffff;

    --footer__link-clr: var(--primary);
}

:root {
    font-family: "Source Sans 3", Arial, sans-serif;
}

h1, h2, h3, .article__heading, .navlink__title, .select__title, .header__logo {
    font-family: "Montserrat Alternates", sans-serif;
}

code, pre, kbd, samp {
    font-family: "JetBrains Mono", monospace;
}

.wrapper,
.notification,
.notification-flash,
button,
.btn,
input,
textarea,
select {
    font-family: "Source Sans 3", Arial, sans-serif;
}

.cust-help .header__inner .header__nav .nav-item a,
.cust-help .header .dropdown-select .label,
.cust-help .header .dropdown-select .label span {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 600;
}
.cust-help .header__inner .header__nav .nav-item i {
    margin-right: 8px;
    font-size: 16px;
    color: var(--header_nav__clr);
}
.cust-help .header__inner .header__nav .nav-item a:hover i {
    color: var(--header_nav__hover_clr);
}

.cust-help .header {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #dc2626 100%);
    border-bottom-color: #991b1b;
}

.search__form {
    border-radius: 8px;
}

.search__form .form-group input {
    border-radius: 6px;
}

.search__form .form-group input:focus,
.search__form .form-group input:hover {
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.15);
}

.search__title {
    color: #0f0f0f;
    background-image: linear-gradient(90deg, #0f0f0f, var(--primary), #0f0f0f);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: itabiks-title-shimmer 3.5s ease-in-out infinite;
}

@keyframes itabiks-title-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .search__title {
        animation: none;
        background-size: 100% 100%;
    }
}

.navlink {
    border-radius: 12px;
    border: 1px solid #fecaca;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.08);
}

.navlink:hover {
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.15);
}

.footer {
    background: #0f0f0f;
    color: #fafafa;
    border-top: 1px solid rgba(254, 202, 202, 0.35);
}

.footer a {
    color: #dc2626;
}