/*
|--------------------------------------------------------------------------
| JOFAS WRIGHT TECHNOLOGIES LIMITED
| GLOBAL DESIGN SYSTEM
|--------------------------------------------------------------------------
|
| Shared visual foundation for the public website.
|
| Purpose:
| - Brand consistency
| - Typography
| - Global reset
| - Box sizing
| - Responsive containers
| - Global spacing
| - Buttons
| - Links
| - Accessibility
| - Shared sections
| - Shared cards
| - Images and media
| - Forms
| - Tables
| - Utility classes
| - Responsive foundations
|
| Page-specific styling should remain in:
| - home.css
| - about.css
| - service.css
| - products.css
| - contact.css
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Brand
       ---------------------------------------------------------------------- */

    --jw-primary: #0b2260;
    --jw-primary-dark: #07183f;
    --jw-primary-light: #163a91;

    --jw-accent: #ff5e14;
    --jw-accent-dark: #d94700;
    --jw-accent-light: #ff7a3d;


    /* ----------------------------------------------------------------------
       Neutral
       ---------------------------------------------------------------------- */

    --jw-white: #ffffff;
    --jw-black: #111111;

    --jw-text: #333333;
    --jw-text-light: #666666;
    --jw-text-muted: #7a8499;

    --jw-bg: #ffffff;
    --jw-bg-soft: #f6f8fb;
    --jw-bg-muted: #eef2f7;

    --jw-border: #dfe4eb;
    --jw-border-light: #edf0f4;


    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --jw-font-primary:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --jw-font-heading:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;


    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --jw-container-width: 1320px;
    --jw-content-width: 1180px;

    --jw-container-padding: 24px;
    --jw-container-padding-tablet: 20px;
    --jw-container-padding-mobile: 16px;


    /* ----------------------------------------------------------------------
       Spacing
       ---------------------------------------------------------------------- */

    --jw-section-padding: 90px;
    --jw-section-padding-tablet: 75px;
    --jw-section-padding-mobile: 60px;


    /* ----------------------------------------------------------------------
       Radius
       ---------------------------------------------------------------------- */

    --jw-radius-sm: 6px;
    --jw-radius-md: 10px;
    --jw-radius-lg: 16px;


    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */

    --jw-shadow-sm:
        0 4px 16px rgba(11, 34, 96, 0.08);

    --jw-shadow-md:
        0 10px 30px rgba(11, 34, 96, 0.10);

    --jw-shadow-lg:
        0 18px 50px rgba(11, 34, 96, 0.14);


    /* ----------------------------------------------------------------------
       Transitions
       ---------------------------------------------------------------------- */

    --jw-transition:
        0.25s ease;

    --jw-transition-slow:
        0.45s ease;


    /* ----------------------------------------------------------------------
       Layering
       ---------------------------------------------------------------------- */

    --jw-z-header: 1030;
    --jw-z-navigation: 1040;
    --jw-z-dropdown: 1050;
    --jw-z-overlay: 1090;
    --jw-z-offcanvas: 1100;
    --jw-z-modal: 1200;
    --jw-z-skip-link: 9999;
}


/* ==========================================================================
   2. GLOBAL RESET / BOX SIZING
   ========================================================================== */

/*
 * Border-box is essential.
 *
 * It ensures:
 * width: 100%;
 * padding-left: 24px;
 * padding-right: 24px;
 *
 * remain inside the declared width instead of creating an extra 48px.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/*
 * Prevent block-level layout components from developing unexpected
 * intrinsic widths when they are children of flex/grid layouts.
 */

html,
body {
    width: 100%;
    max-width: 100%;
}


/*
 * Remove default margins from common structural elements.
 */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}


/*
 * Remove default list spacing.
 *
 * Component-specific lists can restore their own styling.
 */

ul,
ol {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   3. HTML / BODY BASE
   ========================================================================== */

html {
    min-height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    background: var(--jw-bg);
    color: var(--jw-text);

    font-family: var(--jw-font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-wrap: break-word;
}


/*
 * Main structural elements should never introduce an intrinsic minimum
 * width when participating in responsive layouts.
 */

main,
header,
footer,
nav,
section,
article,
aside,
div {
    min-width: 0;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--jw-primary);

    font-family: var(--jw-font-heading);
    font-weight: 700;
    line-height: 1.2;

    overflow-wrap: break-word;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    overflow-wrap: break-word;
}

strong,
b {
    font-weight: 700;
}

small {
    font-size: 0.875em;
}

mark {
    background: rgba(255, 94, 20, 0.14);
    color: inherit;
}


/* ==========================================================================
   5. LINKS
   ========================================================================== */

a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--jw-transition),
        background-color var(--jw-transition),
        border-color var(--jw-transition),
        box-shadow var(--jw-transition),
        transform var(--jw-transition);
}

a:hover {
    color: var(--jw-accent);
}

a:focus {
    outline: none;
}


/* ==========================================================================
   6. MEDIA / IMAGES / SVG
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
    border-style: none;
}

svg {
    overflow: visible;
}

iframe,
embed,
object {
    display: block;
    max-width: 100%;
}

video {
    width: 100%;
    height: auto;
}

audio {
    max-width: 100%;
}


/*
 * Prevent long URLs and unbroken image captions from forcing horizontal
 * page overflow.
 */

img,
svg,
video,
iframe,
embed,
object {
    overflow-wrap: break-word;
}


/* ==========================================================================
   7. FORM ELEMENTS
   ========================================================================== */

button,
input,
textarea,
select {
    margin: 0;
    font: inherit;
}

button,
input,
textarea,
select {
    max-width: 100%;
}

button {
    cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
}

input,
textarea,
select {
    color: inherit;
}

textarea {
    max-width: 100%;
}

input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}


/* ==========================================================================
   8. TABLES / CODE / PRE
   ========================================================================== */

table {
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

pre,
code,
kbd,
samp {
    font-family:
        SFMono-Regular,
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;
}

pre {
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

code,
kbd,
samp {
    overflow-wrap: anywhere;
}


/* ==========================================================================
   9. SELECTION
   ========================================================================== */

::selection {
    background: var(--jw-primary);
    color: var(--jw-white);
}


/* ==========================================================================
   10. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: 3px solid rgba(255, 94, 20, 0.45);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: var(--jw-z-skip-link);

    max-width: calc(100vw - 40px);

    padding: 12px 18px;

    background: var(--jw-primary);
    color: var(--jw-white);

    border-radius: var(--jw-radius-sm);

    box-shadow: var(--jw-shadow-md);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 20px;
}


/* ==========================================================================
   11. SHARED CONTAINER
   ========================================================================== */

/*
 * IMPORTANT:
 *
 * This is the single authoritative definition of .jw-container.
 *
 * header.css must NOT redefine .jw-container.
 *
 * Width is 100% and padding is included because the global box-sizing
 * rule above uses border-box.
 */

.jw-container {
    width: 100%;
    max-width: var(--jw-container-width);

    margin-right: auto;
    margin-left: auto;

    padding-right: var(--jw-container-padding);
    padding-left: var(--jw-container-padding);
}


/*
 * Narrower reading/content container.
 */

.jw-content {
    width: 100%;
    max-width: var(--jw-content-width);

    margin-right: auto;
    margin-left: auto;

    padding-right: var(--jw-container-padding);
    padding-left: var(--jw-container-padding);
}


/* ==========================================================================
   12. SHARED SECTION FOUNDATION
   ========================================================================== */

.jw-section {
    width: 100%;
    padding-top: var(--jw-section-padding);
    padding-bottom: var(--jw-section-padding);
}

.jw-section-soft {
    background: var(--jw-bg-soft);
}

.jw-section-muted {
    background: var(--jw-bg-muted);
}

.jw-section-dark {
    background: var(--jw-primary);
    color: var(--jw-white);
}


/* ==========================================================================
   13. SECTION HEADINGS
   ========================================================================== */

.jw-section-heading {
    width: 100%;
    max-width: 760px;

    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;

    text-align: center;
}

.jw-section-eyebrow {
    display: inline-block;

    max-width: 100%;

    margin-bottom: 10px;

    color: var(--jw-accent);

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}

.jw-section-title {
    margin: 0;

    color: var(--jw-primary);

    font-family: var(--jw-font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;

    overflow-wrap: break-word;
}

.jw-section-dark .jw-section-title {
    color: var(--jw-white);
}

.jw-section-description {
    max-width: 100%;

    margin: 18px auto 0;

    color: var(--jw-text-light);

    font-size: 1rem;
    line-height: 1.8;

    overflow-wrap: break-word;
}

.jw-section-dark .jw-section-description {
    color: rgba(255, 255, 255, 0.82);
}


/* ==========================================================================
   14. SHARED BUTTONS
   ========================================================================== */

.jw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 0;
    min-height: 48px;

    max-width: 100%;

    padding: 12px 25px;

    border: 2px solid transparent;
    border-radius: var(--jw-radius-sm);

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    white-space: normal;

    transition:
        background-color var(--jw-transition),
        border-color var(--jw-transition),
        color var(--jw-transition),
        box-shadow var(--jw-transition),
        transform var(--jw-transition);
}

.jw-btn:hover {
    transform: translateY(-2px);
}

.jw-btn:focus-visible {
    outline: 3px solid rgba(255, 94, 20, 0.35);
    outline-offset: 3px;
}

.jw-btn-primary {
    background: var(--jw-accent);
    border-color: var(--jw-accent);
    color: var(--jw-white);
}

.jw-btn-primary:hover {
    background: var(--jw-accent-dark);
    border-color: var(--jw-accent-dark);
    color: var(--jw-white);

    box-shadow:
        0 8px 20px rgba(255, 94, 20, 0.22);
}

.jw-btn-secondary {
    background: var(--jw-primary);
    border-color: var(--jw-primary);
    color: var(--jw-white);
}

.jw-btn-secondary:hover {
    background: var(--jw-primary-dark);
    border-color: var(--jw-primary-dark);
    color: var(--jw-white);

    box-shadow:
        0 8px 20px rgba(11, 34, 96, 0.22);
}

.jw-btn-outline {
    background: transparent;
    border-color: var(--jw-primary);
    color: var(--jw-primary);
}

.jw-btn-outline:hover {
    background: var(--jw-primary);
    border-color: var(--jw-primary);
    color: var(--jw-white);
}

.jw-btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--jw-white);
}

.jw-btn-outline-light:hover {
    background: var(--jw-white);
    border-color: var(--jw-white);
    color: var(--jw-primary);
}


/* ==========================================================================
   15. SHARED CARDS
   ========================================================================== */

.jw-card {
    width: 100%;
    height: 100%;
    min-width: 0;

    padding: 30px;

    background: var(--jw-white);

    border: 1px solid var(--jw-border);
    border-radius: var(--jw-radius-md);

    box-shadow: var(--jw-shadow-sm);

    transition:
        transform var(--jw-transition-slow),
        box-shadow var(--jw-transition-slow),
        border-color var(--jw-transition-slow);
}

.jw-card:hover {
    transform: translateY(-5px);

    border-color: rgba(11, 34, 96, 0.18);

    box-shadow: var(--jw-shadow-md);
}

.jw-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    margin-bottom: 22px;

    background: rgba(255, 94, 20, 0.10);

    border-radius: 12px;

    color: var(--jw-accent);
}

.jw-card-icon svg {
    width: 28px;
    height: 28px;
}

.jw-card-title {
    margin: 0 0 12px;

    color: var(--jw-primary);

    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.35;

    overflow-wrap: break-word;
}

.jw-card-text {
    margin: 0;

    color: var(--jw-text-light);

    font-size: 0.95rem;
    line-height: 1.75;

    overflow-wrap: break-word;
}


/* ==========================================================================
   16. SHARED IMAGE TREATMENT
   ========================================================================== */

.jw-image {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    border-radius: var(--jw-radius-md);
}

.jw-image-cover {
    width: 100%;
    max-width: 100%;
    height: 100%;

    object-fit: cover;
}

.jw-image-frame {
    width: 100%;
    max-width: 100%;

    overflow: hidden;

    border-radius: var(--jw-radius-lg);

    box-shadow: var(--jw-shadow-md);
}

.jw-image-frame img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform var(--jw-transition-slow);
}

.jw-image-frame:hover img {
    transform: scale(1.025);
}


/* ==========================================================================
   17. SHARED CONTENT LISTS
   ========================================================================== */

.jw-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jw-list li {
    position: relative;

    margin-bottom: 12px;
    padding-left: 28px;

    overflow-wrap: break-word;
}

.jw-list li:last-child {
    margin-bottom: 0;
}

.jw-list li::before {
    content: "";

    position: absolute;
    top: 0.72em;
    left: 0;

    width: 8px;
    height: 8px;

    background: var(--jw-accent);

    border-radius: 50%;

    transform: translateY(-50%);
}


/* ==========================================================================
   18. SHARED CTA
   ========================================================================== */

.jw-cta {
    position: relative;

    width: 100%;

    padding: 80px 20px;

    background:
        linear-gradient(
            135deg,
            var(--jw-primary),
            var(--jw-primary-dark)
        );

    color: var(--jw-white);

    overflow: hidden;
}

.jw-cta::before {
    content: "";

    position: absolute;
    top: -120px;
    right: -120px;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

.jw-cta::after {
    content: "";

    position: absolute;
    bottom: -180px;
    left: -100px;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;

    pointer-events: none;
}

.jw-cta-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 850px;

    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.jw-cta-title {
    margin: 0 0 15px;

    color: var(--jw-white);

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;

    overflow-wrap: break-word;
}

.jw-cta-text {
    max-width: 680px;

    margin: 0 auto 28px;

    color: rgba(255, 255, 255, 0.82);

    overflow-wrap: break-word;
}


/* ==========================================================================
   19. FORM FOUNDATION
   ========================================================================== */

.jw-form-label {
    display: block;

    margin-bottom: 7px;

    color: var(--jw-primary);

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.jw-form-control {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 50px;

    padding: 12px 15px;

    background: var(--jw-white);

    border: 1px solid var(--jw-border);
    border-radius: var(--jw-radius-sm);

    color: var(--jw-text);

    transition:
        border-color var(--jw-transition),
        box-shadow var(--jw-transition);
}

.jw-form-control::placeholder {
    color: #8992a3;
    opacity: 1;
}

.jw-form-control:focus {
    outline: none;

    border-color: var(--jw-primary);

    box-shadow:
        0 0 0 3px rgba(11, 34, 96, 0.10);
}

textarea.jw-form-control {
    min-height: 150px;
    resize: vertical;
}

select.jw-form-control {
    cursor: pointer;
}


/* ==========================================================================
   20. RESPONSIVE TABLE WRAPPER
   ========================================================================== */

/*
 * Tables can legitimately be wider than a small viewport.
 * They should scroll inside their own wrapper instead of expanding the page.
 */

.jw-table-wrap {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}

.jw-table-wrap > table {
    width: 100%;
    min-width: 600px;
}


/* ==========================================================================
   21. RESPONSIVE EMBEDS
   ========================================================================== */

.jw-responsive-media {
    position: relative;

    width: 100%;
    max-width: 100%;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    border-radius: var(--jw-radius-md);
}

.jw-responsive-media iframe,
.jw-responsive-media video,
.jw-responsive-media embed,
.jw-responsive-media object {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    max-width: 100%;

    border: 0;
}


/* ==========================================================================
   22. UTILITY CLASSES
   ========================================================================== */

.jw-text-primary {
    color: var(--jw-primary) !important;
}

.jw-text-accent {
    color: var(--jw-accent) !important;
}

.jw-text-white {
    color: var(--jw-white) !important;
}

.jw-bg-primary {
    background-color: var(--jw-primary) !important;
}

.jw-bg-accent {
    background-color: var(--jw-accent) !important;
}

.jw-bg-soft {
    background-color: var(--jw-bg-soft) !important;
}

.jw-text-center {
    text-align: center !important;
}

.jw-text-left {
    text-align: left !important;
}

.jw-text-right {
    text-align: right !important;
}

.jw-width-100 {
    width: 100% !important;
}

.jw-max-width-100 {
    max-width: 100% !important;
}

.jw-overflow-hidden {
    overflow: hidden !important;
}

.jw-overflow-auto {
    overflow: auto !important;
}

.jw-no-wrap {
    white-space: nowrap !important;
}

.jw-break-word {
    overflow-wrap: anywhere !important;
}


/* ==========================================================================
   23. BOOTSTRAP COMPATIBILITY FOUNDATION
   ========================================================================== */

/*
 * Bootstrap rows intentionally use negative margins.
 * These rules prevent custom content placed inside responsive flex/grid
 * structures from developing an intrinsic width larger than its parent.
 */

.row > *,
.row > [class*="col-"] {
    min-width: 0;
}

.container,
.container-fluid,
.row {
    max-width: 100%;
}


/*
 * Bootstrap's responsive images should remain constrained.
 */

.img-fluid {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   24. LARGE TABLET / TABLET
   ========================================================================== */

@media (max-width: 1199.98px) {

    :root {
        --jw-container-padding: 22px;
    }

    .jw-section {
        padding-top: 82px;
        padding-bottom: 82px;
    }
}


/* ==========================================================================
   25. TABLET
   ========================================================================== */

@media (max-width: 991.98px) {

    :root {
        --jw-section-padding: var(--jw-section-padding-tablet);
        --jw-container-padding: var(--jw-container-padding-tablet);
    }

    html {
        scroll-padding-top: 80px;
    }

    .jw-section-heading {
        margin-bottom: 40px;
    }

    .jw-card {
        padding: 26px;
    }
}


/* ==========================================================================
   26. MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    :root {
        --jw-section-padding: var(--jw-section-padding-mobile);
        --jw-container-padding: 18px;
    }

    body {
        font-size: 15.5px;
    }

    html {
        scroll-padding-top: 72px;
    }

    .jw-section-heading {
        margin-bottom: 32px;
    }

    .jw-section-title {
        font-size: 2rem;
    }

    .jw-section-description {
        font-size: 0.96rem;
    }

    .jw-card {
        padding: 24px;
    }

    .jw-cta {
        padding: 65px 18px;
    }

    .jw-cta-title {
        font-size: clamp(1.9rem, 7vw, 2.5rem);
    }

    .jw-btn {
        min-height: 48px;
    }
}


/* ==========================================================================
   27. SMALL MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    :root {
        --jw-container-padding: 16px;
    }

    body {
        font-size: 15px;
    }

    .jw-section-title {
        font-size: 1.8rem;
    }

    .jw-section-description {
        font-size: 0.94rem;
    }

    .jw-card {
        padding: 22px;
    }

    .jw-cta {
        padding: 55px 16px;
    }

    .jw-cta-title {
        font-size: 1.9rem;
    }

    /*
     * Full-width buttons are more usable on small screens and prevent
     * long button labels from squeezing surrounding content.
     */

    .jw-btn {
        width: 100%;
    }
}


/* ==========================================================================
   28. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    :root {
        --jw-container-padding: 14px;
    }

    body {
        font-size: 14.5px;
    }

    .jw-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .jw-section-title {
        font-size: 1.65rem;
    }

    .jw-card {
        padding: 20px;
    }

    .jw-cta {
        padding: 50px 14px;
    }

    .jw-cta-title {
        font-size: 1.75rem;
    }
}


/* ==========================================================================
   29. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}