/*!
Theme Name: tgaitools
Author: Bakhodir Sh
Version: 1.0.0
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: tgaitools
*/

@layer base {
    :root {
        --tw-container: 1280px;
        --header-h: 74px;

        --bg: #f7f8fc;
        --bg-subtle: #f1f4fa;
        --surface: #ffffff;
        --surface-2: #f3f5fa;
        --border: #e5e9f2;
        --border-strong: #d4dae6;
        --text: #0f1729;
        --text-2: #475569;
        --text-3: #6b7688;
        --brand-500: #3b82f6;
        --brand-600: #2563eb;
    }

    .dark {
        --bg: #0b1220;
        --bg-subtle: #0e1626;
        --surface: #111a2b;
        --surface-2: #16233a;
        --border: #223049;
        --border-strong: #2c3d59;
        --text: #e8eef7;
        --text-2: #a9b6c9;
        --text-3: #8595ac;
        color-scheme: dark;
    }

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
        font-feature-settings: 'cv11', 'ss01';
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        background-color: var(--bg);
        color: var(--text);
        transition: background-color .25s ease, color .25s ease;
    }

    html, body {
        overflow-x: clip;
    }

    :where(a, button, input, textarea, select, [tabindex]):focus-visible {
        outline: 2px solid var(--brand-500, #3b82f6);
        outline-offset: 2px;
        border-radius: 4px;
    }

    :target {
        scroll-margin-top: calc(var(--header-h) + 1.5rem);
    }
}

a:not(:where(.btn)) {
    transition: color .15s ease;
}

a:not(:where(.btn)):hover {
    color: var(--brand-700, #1d4ed8);
}

.surface-app {
    background-color: var(--bg);
}

.surface-subtle {
    background-color: var(--bg-subtle);
}

.surface-card {
    background-color: var(--surface);
}

.surface-2 {
    background-color: var(--surface-2);
}

.text-app {
    color: var(--text);
}

.text-2 {
    color: var(--text-2);
}

.text-3 {
    color: var(--text-3);
}

.border-app {
    border-color: var(--border);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    white-space: nowrap;
    cursor: pointer;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--brand-600);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgb(37 99 235 / 0.6);
}

.btn-primary:hover {
    background-color: var(--brand-700, #1d4ed8);
}

.btn-ghost {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
    border-color: var(--text-3);
    background-color: var(--surface-2);
}

.btn-outline {
    background-color: transparent;
    color: var(--brand-600);
    border: 1px solid #bfdbfe;
}

.btn-outline:hover {
    background-color: #eff6ff;
}

.dark .btn-outline {
    border-color: var(--border-strong);
    color: var(--brand-500);
}

.dark .btn-outline:hover {
    background-color: var(--surface-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    line-height: 1.2;
}

.tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.10);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.dark .card {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 12px 30px -16px rgb(0 0 0 / 0.6);
}

.card-interactive:hover {
    box-shadow: 0 2px 4px 0 rgb(15 23 42 / 0.06), 0 18px 40px -16px rgb(15 23 42 / 0.22);
    transform: translateY(-3px);
    border-color: var(--brand-500);
}

.section {
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.prose-content {
    color: var(--text-2);
    line-height: 1.75;
}

.prose-content > * + * {
    margin-top: 1.25rem;
}

.prose-content h2 {
    color: var(--text);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    line-height: 1.2;
    margin-top: 2.5rem;
    letter-spacing: -0.02em;
}

.prose-content h3 {
    color: var(--text);
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 2rem;
}

.prose-content strong {
    color: var(--text);
    font-weight: 700;
}

.prose-content a {
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose-content ul {
    list-style: disc;
    padding-left: 1.4rem;
}

.prose-content ol {
    list-style: decimal;
    padding-left: 1.4rem;
}

.prose-content li + li {
    margin-top: 0.5rem;
}

.prose-content blockquote {
    border-left: 4px solid var(--brand-500);
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: var(--text-2);
    font-style: italic;
}

.prose-content code {
    background: var(--surface-2);
    padding: 0.15em 0.4em;
    border-radius: 6px;
    font-size: 0.9em;
    color: var(--brand-600);
}

.prose-content img {
    border-radius: 1rem;
}

.field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.field-hint {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-top: 0.35rem;
}

.input, .textarea, .select {
    width: 100%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder, .textarea::placeholder {
    color: var(--text-3);
}

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.15);
}

.textarea {
    resize: vertical;
    min-height: 8rem;
}

/* Inline validation state for wizard/form fields. */
.input.is-invalid, .textarea.is-invalid, .select.is-invalid {
    border-color: #f43f5e; /* rose-500 */
}

.input.is-invalid:focus, .textarea.is-invalid:focus, .select.is-invalid:focus {
    border-color: #f43f5e;
    box-shadow: 0 0 0 4px rgb(244 63 94 / 0.15);
}

input[type="checkbox"].is-invalid {
    outline: 2px solid #f43f5e;
    outline-offset: 2px;
}

.field-error {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #e11d48;
}

.field-error svg {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.05rem;
}

.bg-grid {
    background-image: linear-gradient(to right, rgb(15 23 42 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
}

.dark .bg-grid {
    background-image: linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}

.bg-radial-brand {
    background: radial-gradient(60% 60% at 50% 0%, rgb(37 99 235 / 0.14) 0%, transparent 70%);
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sticky-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
}

@media (min-width: 1024px) {
    .lg\:sticky-aside {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
    }
}

.toc-link {
    display: block;
    padding: 0.35rem 0.75rem;
    border-left: 2px solid transparent;
    color: var(--text-3);
    font-size: 0.875rem;
    transition: color .15s ease, border-color .15s ease;
}

.toc-link:hover {
    color: var(--text);
}

.toc-link[data-active='true'] {
    color: var(--brand-600);
    border-color: var(--brand-500);
    font-weight: 600;
}

.dark .toc-link[data-active='true'] {
    color: var(--brand-500);
}

/* Header shadow on scroll */
.site-header {
    transition: box-shadow .2s ease, background-color .2s ease;
}

.site-header[data-scrolled='true'] {
    box-shadow: 0 1px 0 0 #eef2f7, 0 8px 24px -18px rgb(15 23 42 / 0.25);
}

[data-accordion] button[aria-expanded='true'] .acc-chevron {
    transform: rotate(180deg);
}

.acc-chevron {
    transition: transform .2s ease;
}

.acc-panel {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: .3s;
}

.mobile-menu[hidden] {
    display: none;
}

.lang-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.lang-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .22s cubic-bezier(.16, 1, .3, 1), visibility .22s;
}

.group:hover > .nav-dropdown,
.group:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .28s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility .3s;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mobile-menu nav > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.mobile-menu.is-open nav > * {
    opacity: 1;
    transform: none;
}

.mobile-menu.is-open nav > *:nth-child(1) {
    transition-delay: .04s;
}

.mobile-menu.is-open nav > *:nth-child(2) {
    transition-delay: .07s;
}

.mobile-menu.is-open nav > *:nth-child(3) {
    transition-delay: .10s;
}

.mobile-menu.is-open nav > *:nth-child(4) {
    transition-delay: .13s;
}

.mobile-menu.is-open nav > *:nth-child(5) {
    transition-delay: .16s;
}

.mobile-menu.is-open nav > *:nth-child(6) {
    transition-delay: .19s;
}

.mobile-menu.is-open nav > *:nth-child(n+7) {
    transition-delay: .22s;
}

.mobile-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
}

.mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1023px) {
    .tool-filters-aside {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 60;
        width: min(320px, 86vw);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        background: var(--surface);
        border-inline-end: 1px solid var(--border);
        box-shadow: 24px 0 48px -24px rgb(15 23 42 / 0.35);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .32s cubic-bezier(.16, 1, .3, 1), visibility .32s;
    }

    .tool-filters-aside.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .tool-filters-aside .card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .tool-filters-overlay {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgb(15 23 42 / 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s;
    }

    .tool-filters-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }
}

.search-overlay:not(.hidden) {
    animation: tg-fade-in .2s ease both;
}

.search-overlay:not(.hidden) .search-overlay__panel {
    animation: tg-overlay-panel-in .34s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes tg-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes tg-overlay-panel-in {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.reveal-init {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
}

.reveal-init.reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

html.lenis {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.screenshot-swiper {
    position: relative;
    padding-bottom: 2rem !important;
}

.screenshot-swiper .swiper-pagination-bullet {
    background: var(--text-3);
    opacity: 0.3;
    width: 6px;
    height: 6px;
    transition: all 0.2s ease;
    margin: 0 4px !important;
}

.screenshot-swiper .swiper-pagination-bullet-active {
    background: var(--brand-600);
    opacity: 1;
    width: 14px;
    border-radius: 9999px;
}

.dark .screenshot-swiper .swiper-pagination-bullet {
    background: var(--text-2);
    opacity: 0.5;
}

.dark .screenshot-swiper .swiper-pagination-bullet-active {
    background: var(--brand-500);
}

@media (width < 1280px) {
    .screenshot-swiper {
        overflow: visible;
    }

    .screenshot-swiper .swiper-slide {
        width: auto !important;
        max-width: 240px;
    }
}

.swiper-button-prev svg,
.swiper-button-next svg {
    width: 1.25em;
    height: 1.25em;
    color: #fff;
}

.breadcrumb_last {
    color: var(--text);
}

.delim {
    margin: 0 4px;
}

.custom-logo-link img {
    max-height: clamp(40px, 4vw, 56px);
    width: auto;
}

.tg-backtotop {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--surface);
    color: var(--brand-600);
    box-shadow: 0 6px 20px rgba(15, 23, 41, .12);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, border-color .2s ease;
}

.tg-backtotop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tg-backtotop:hover {
    border-color: var(--brand-600);
}

.tg-backtotop__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tg-backtotop__track {
    fill: none;
    stroke: var(--border);
    stroke-width: 2.5;
}

.tg-backtotop__progress {
    fill: none;
    stroke: var(--brand-600);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}

.tg-backtotop__arrow {
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
}

@media ( max-width: 640px ) {
    .tg-backtotop {
        right: 1rem;
        bottom: 1rem;
    }
}

@media ( prefers-reduced-motion: reduce ) {
    .tg-backtotop,
    .tg-backtotop__progress {
        transition: opacity .2s ease, visibility .2s ease;
    }
}

.tg-contact-modal {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.tg-contact-fancybox .fancybox__content {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.tg-contact-fancybox .fancybox__content > .f-button.is-close-btn {
    top: 0.75rem;
    right: 0.75rem;
    color: var(--text-2);
}

.tg-contact-modal .wpcf7 p {
    margin: 0;
}

.tg-contact-modal .wpcf7-form-control-wrap {
    display: block;
}

.tg-contact-modal .tg-acceptance .wpcf7-list-item {
    display: block;
    margin: 0;
}

.tg-contact-modal .tg-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-2);
    cursor: pointer;
}

.tg-contact-modal .tg-acceptance input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    accent-color: var(--brand-600);
}

.tg-contact-modal .tg-acceptance a {
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tg-contact-modal .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.tg-contact-modal .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-strong);
    color: var(--text-2);
}

.tg-contact-modal .wpcf7-form.sent .wpcf7-response-output {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.tg-contact-modal .wpcf7-form.invalid .wpcf7-response-output,
.tg-contact-modal .wpcf7-form.failed .wpcf7-response-output {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.tg-contact-modal .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #dc2626;
}

.tg-contact-modal .wpcf7-not-valid {
    border-color: #f87171 !important;
}

.dark .tg-contact-modal .wpcf7-form.sent .wpcf7-response-output {
    background: rgba(6, 78, 59, 0.35);
    color: #6ee7b7;
}

.dark .tg-contact-modal .wpcf7-form.invalid .wpcf7-response-output,
.dark .tg-contact-modal .wpcf7-form.failed .wpcf7-response-output {
    background: rgba(127, 29, 29, 0.35);
    color: #fca5a5;
}

.tg-contact-success {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.tg-contact-success[hidden] {
    display: none;
}

.tg-contact-success__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.1rem;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #059669;
}

.dark .tg-contact-success__icon {
    background: rgba(6, 78, 59, 0.4);
    color: #6ee7b7;
}

.tg-contact-success h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.tg-contact-success p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-2);
}

.tg-contact-success .btn {
    margin-top: 1.5rem;
}

.submitting .btn, .state-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
    background: #222 !important;
    border-color: #222
}

.submitting .btn:before, .state-loading:before {
    content: "";
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0iIiB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0U5QjQzRSIgc3Ryb2tlLXdpZHRoPSIyIj4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIgdmFsdWVzPSIwOzQwIiBrZXlUaW1lcz0iMDsxIiBrZXlTcGxpbmVzPSIwIDAuMiAwLjggMSIgY2FsY01vZGU9InNwbGluZSIgYmVnaW49IjBzIi8+CiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMXMiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBrZXlTcGxpbmVzPSIwLjIgMCAwLjggMSIgY2FsY01vZGU9InNwbGluZSIgYmVnaW49IjBzIi8+CjwvY2lyY2xlPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2VlZSIgc3Ryb2tlLXdpZHRoPSIyIj4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIgdmFsdWVzPSIwOzQwIiBrZXlUaW1lcz0iMDsxIiBrZXlTcGxpbmVzPSIwIDAuMiAwLjggMSIgY2FsY01vZGU9InNwbGluZSIgYmVnaW49Ii0wLjVzIi8+CiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMXMiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBrZXlTcGxpbmVzPSIwLjIgMCAwLjggMSIgY2FsY01vZGU9InNwbGluZSIgYmVnaW49Ii0wLjVzIi8+CjwvY2lyY2xlPgo8L3N2Zz4=) no-repeat center/cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 22
}

.related-swiper .swiper-button-next svg,
.related-swiper .swiper-button-prev svg {
    color: #333;
}

.swiper-button-next:disabled,
.swiper-button-prev:disabled {
    opacity: 0.5 !important;
}

.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (width < 992px){
    .latest-posts {
        overflow-x: clip;
    }

    .latest-posts .swiper {
        overflow: visible;
    }
    .related-posts {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-x: clip;
    }

    .related-posts .swiper {
        overflow: visible;
    }
}

.tool-categories .swiper-button-prev svg,
.tool-categories .swiper-button-next svg {
    color: #333;
}