/* =========================================================
   TAB_
   DIGITAL STUDIO
   BLACK / WHITE SYSTEM
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --black: #030303;
    --black-2: #080808;
    --white: #f4f4f4;
    --gray: #9b9b9b;
    --gray-dark: #1a1a1a;

    --border:
        rgba(255,255,255,.13);

    --ease:
        cubic-bezier(.77,0,.18,1);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x:
        hidden;

    cursor:
        none;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


::selection {

    background:
        var(--white);

    color:
        var(--black);

}


/* =========================================================
   NOISE
========================================================= */

.noise {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        9998;

    opacity:
        .035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

}


/* =========================================================
   CURSOR
========================================================= */

.cursor {

    position:
        fixed;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        white;

    transform:
        translate(-50%,-50%);

    pointer-events:
        none;

    z-index:
        10000;

}


.cursor-follower {

    position:
        fixed;

    width:
        35px;

    height:
        35px;

    border:
        1px solid rgba(255,255,255,.6);

    border-radius:
        50%;

    transform:
        translate(-50%,-50%);

    pointer-events:
        none;

    z-index:
        9999;

    transition:
        width .3s ease,
        height .3s ease;

}


body.hovering
.cursor-follower {

    width:
        60px;

    height:
        60px;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        95px;

    padding:
        0 5vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    z-index:
        100;

}


.logo {

    font-size:
        34px;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.logo span {

    font-weight:
        400;

}


.nav {

    display:
        flex;

    gap:
        80px;

}


.nav a {

    min-width:
        126px;

    padding:
        8px 25px;

    text-align:
        center;

    border-radius:
        30px;

    background:
        #181818;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        .4s var(--ease);

}


.nav a:hover {

    background:
        white;

    color:
        black;

    transform:
        translateY(-3px);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height:
        100vh;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    padding:
        140px 7vw;

    background:

        radial-gradient(
            circle at 75% 45%,
            #181818 0,
            transparent 25%
        ),

        #030303;

}


/* grid */

.hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .08;

    background-image:

        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent
        );

}


/* diagonal */

.hero::after {

    content:
        "";

    position:
        absolute;

    width:
        1px;

    height:
        150%;

    background:
        rgba(255,255,255,.15);

    right:
        28%;

    top:
        -20%;

    transform:
        rotate(25deg);

}


/* left */

.hero-left {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

}


.eyebrow {

    font-size:
        11px;

    letter-spacing:
        4px;

    margin-bottom:
        35px;

    opacity:
        .55;

}


.hero h1 {

    font-size:
        clamp(55px, 8vw, 120px);

    line-height:
        .86;

    letter-spacing:
        -7px;

    font-weight:
        800;

    animation:
        heroTitle 1.2s var(--ease) both;

}


.hero h1 span {

    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px white;

}


.hero-description {

    max-width:
        430px;

    margin-top:
        40px;

    font-size:
        15px;

    line-height:
        1.7;

    color:
        #aaa;

    animation:
        fadeUp 1s .4s both;

}


.main-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        40px;

    padding:
        16px 25px;

    border:
        1px solid white;

    border-radius:
        50px;

    font-size:
        11px;

    font-weight:
        bold;

    transition:
        .4s var(--ease);

}


.main-button span {

    font-size:
        18px;

}


.main-button:hover {

    background:
        white;

    color:
        black;

    transform:
        translateX(8px);

}


/* =========================================================
   ABSTRACT TAB SYMBOL
========================================================= */

.hero-symbol {

    position:
        absolute;

    right:
        12%;

    top:
        38%;

    width:
        230px;

    height:
        230px;

    transform:
        rotate(-5deg);

    transition:
        transform .2s ease;

}


.symbol-top {

    position:
        absolute;

    width:
        150px;

    height:
        70px;

    left:
        40px;

    top:
        5px;

    background:
        white;

    clip-path:
        polygon(
            0 40%,
            45% 0,
            100% 40%,
            58% 65%,
            32% 50%
        );

}


.symbol-body {

    position:
        absolute;

    left:
        40px;

    top:
        55px;

    width:
        150px;

    height:
        130px;

    background:
        white;

    clip-path:
        polygon(
            0 0,
            50% 25%,
            100% 0,
            100% 75%,
            50% 100%,
            0 75%
        );

}


.symbol-side {

    position:
        absolute;

    background:
        #050505;

}


.symbol-side.left {

    width:
        30px;

    height:
        45px;

    left:
        22px;

    top:
        50px;

}


.symbol-side.right {

    width:
        30px;

    height:
        45px;

    right:
        22px;

    top:
        50px;

}


.symbol-glow {

    position:
        absolute;

    inset:
        20px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius:
        50%;

    animation:
        pulse 3s ease-in-out infinite;

}


.hero-number {

    position:
        absolute;

    right:
        5vw;

    bottom:
        40px;

    font-size:
        11px;

    letter-spacing:
        3px;

    opacity:
        .5;

}


.hero-scroll {

    position:
        absolute;

    bottom:
        40px;

    left:
        7vw;

    font-size:
        9px;

    letter-spacing:
        3px;

    opacity:
        .45;

}


/* =========================================================
   MARQUEE
========================================================= */

.marquee {

    overflow:
        hidden;

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    padding:
        18px 0;

    white-space:
        nowrap;

}


.marquee-track {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        30px;

    animation:
        marquee 25s linear infinite;

}


.marquee span {

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.marquee i {

    font-style:
        normal;

    opacity:
        .4;

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

    padding:
        150px 7vw;

}


.section-label {

    font-size:
        10px;

    letter-spacing:
        3px;

    color:
        #777;

    margin-bottom:
        60px;

}


/* =========================================================
   ABOUT
========================================================= */

.about {

    min-height:
        650px;

}


.about-content {

    display:
        grid;

    grid-template-columns:
        1.3fr .7fr;

    gap:
        100px;

}


.about h2 {

    font-size:
        clamp(45px,6vw,85px);

    line-height:
        .95;

    letter-spacing:
        -5px;

}


.about h2 span {

    color:
        transparent;

    -webkit-text-stroke:
        1px white;

}


.about-text {

    max-width:
        430px;

    padding-top:
        15px;

}


.about-text p {

    font-size:
        15px;

    line-height:
        1.8;

    color:
        #999;

    margin-bottom:
        25px;

}


/* =========================================================
   SERVICES
========================================================= */

.services {

    background:
        #070707;

}


.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid var(--border);

    border-left:
        1px solid var(--border);

}


.service-card {

    min-height:
        350px;

    padding:
        35px;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    position:
        relative;

    overflow:
        hidden;

    transition:
        .6s var(--ease);

}


.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        100%;

    height:
        100%;

    left:
        -100%;

    top:
        0;

    background:
        white;

    transition:
        .6s var(--ease);

    z-index:
        0;

}


.service-card:hover::before {

    left:
        0;

}


.service-card > * {

    position:
        relative;

    z-index:
        2;

}


.service-number {

    font-size:
        10px;

    opacity:
        .4;

}


.service-icon {

    margin-top:
        60px;

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    border:
        1px solid #444;

    display:
        inline-block;

    padding:
        8px 12px;

}


.service-card h3 {

    margin-top:
        25px;

    font-size:
        25px;

}


.service-card p {

    color:
        #888;

    font-size:
        12px;

    line-height:
        1.6;

    margin-top:
        12px;

    max-width:
        230px;

}


.service-arrow {

    position:
        absolute;

    bottom:
        30px;

    right:
        30px;

    font-size:
        22px;

    transition:
        .4s;

}


.service-card:hover {

    color:
        black;

}


.service-card:hover p {

    color:
        #444;

}


.service-card:hover .service-icon {

    border-color:
        black;

}


.service-card:hover .service-arrow {

    transform:
        rotate(45deg);

}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio {

    background:
        #030303;

}


.portfolio-header {

    display:
        grid;

    grid-template-columns:
        .7fr 1.3fr;

    margin-bottom:
        80px;

}


.portfolio-header .section-label {

    grid-row:
        span 2;

}


.portfolio-header h2 {

    font-size:
        clamp(50px,7vw,100px);

    letter-spacing:
        -6px;

    line-height:
        .85;

}


.portfolio-header h2 span {

    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px white;

}


.portfolio-header p {

    margin-top:
        25px;

    color:
        #777;

}


/* =========================================================
   PROJECT GRID
========================================================= */

.projects-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        50px 25px;

}


.project {

    display:
        block;

}


.project-preview {

    height:
        430px;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid #202020;

    background:
        #111;

    transition:
        .7s var(--ease);

}


.project:hover .project-preview {

    transform:
        translateY(-8px);

    border-color:
        #555;

}


.browser-bar {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        30px;

    background:
        #0a0a0a;

    border-bottom:
        1px solid #222;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0 12px;

    z-index:
        4;

}


.browser-bar span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #777;

}


/* =========================================================
   TOOLKIT PREVIEW
========================================================= */

.toolkit-preview {

    height:
        100%;

    padding:
        75px 45px;

    background:
        linear-gradient(
            135deg,
            #151515,
            #050505
        );

}


.mini-logo {

    font-size:
        11px;

    letter-spacing:
        4px;

}


.mini-title {

    margin-top:
        70px;

    font-size:
        45px;

    line-height:
        .85;

    font-weight:
        800;

}


.mini-title strong {

    color:
        transparent;

    -webkit-text-stroke:
        1px white;

}


.mini-boxes {

    position:
        absolute;

    right:
        35px;

    bottom:
        40px;

    display:
        flex;

    gap:
        5px;

}


.mini-boxes i {

    width:
        35px;

    height:
        35px;

    border:
        1px solid #777;

}


/* =========================================================
   BELINGUISH
========================================================= */

.bel-preview {

    height:
        100%;

    background:
        #e7e7e7;

    color:
        #050505;

    padding:
        60px 45px;

}


.bel-logo {

    font-size:
        14px;

    font-weight:
        bold;

    letter-spacing:
        3px;

}


.bel-headline {

    margin-top:
        90px;

    font-size:
        52px;

    line-height:
        .9;

    font-weight:
        300;

}


.bel-headline strong {

    font-weight:
        800;

}


.bel-line {

    position:
        absolute;

    bottom:
        45px;

    left:
        45px;

    width:
        120px;

    height:
        1px;

    background:
        black;

}


/* =========================================================
   MOODLE
========================================================= */

.moodle-preview {

    height:
        100%;

    background:
        #121212;

}


.moodle-top {

    padding:
        50px;

    font-size:
        30px;

    font-weight:
        bold;

    letter-spacing:
        5px;

}


.moodle-columns {

    display:
        grid;

    grid-template-columns:
        30% 70%;

    height:
        70%;

    border-top:
        1px solid #333;

}


.moodle-columns > div {

    padding:
        30px;

}


.moodle-columns > div:first-child {

    border-right:
        1px solid #333;

}


.moodle-columns i {

    display:
        block;

    height:
        55px;

    border:
        1px solid #333;

    margin-bottom:
        10px;

}


/* =========================================================
   ATENAS
========================================================= */

.atenas-preview {

    height:
        100%;

    background:
        #ddd;

    color:
        #111;

    padding:
        50px;

}


.atenas-title {

    font-size:
        12px;

    letter-spacing:
        5px;

}


.chair {

    position:
        absolute;

    width:
        160px;

    height:
        180px;

    border:
        3px solid #111;

    border-radius:
        50% 50% 10% 10%;

    left:
        50%;

    top:
        48%;

    transform:
        translate(-50%,-50%);

}


.chair::after {

    content:
        "";

    position:
        absolute;

    width:
        130px;

    height:
        3px;

    background:
        #111;

    left:
        15px;

    bottom:
        20px;

}


.atenas-bottom {

    position:
        absolute;

    bottom:
        35px;

    right:
        40px;

    font-size:
        10px;

    letter-spacing:
        4px;

}


/* =========================================================
   LUISINA
========================================================= */

.luisina-preview {

    height:
        100%;

    background:
        #f0f0f0;

    color:
        #111;

    padding:
        50px;

}


.luisina-name {

    font-size:
        12px;

    letter-spacing:
        5px;

}


.luisina-circle {

    position:
        absolute;

    width:
        210px;

    height:
        210px;

    border:
        1px solid #111;

    border-radius:
        50%;

    left:
        50%;

    top:
        52%;

    transform:
        translate(-50%,-50%);

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    font-size:
        90px;

    font-family:
        Georgia,
        serif;

}


.luisina-text {

    position:
        absolute;

    bottom:
        40px;

    left:
        50px;

    font-size:
        9px;

    letter-spacing:
        3px;

}


/* =========================================================
   DANESE
========================================================= */

.danese-preview {

    height:
        100%;

    background:
        #151515;

    padding:
        50px;

    text-align:
        center;

}


.danese-brand {

    font-size:
        11px;

    letter-spacing:
        6px;

}


.perfume {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%,-50%);

}


.perfume-cap {

    width:
        45px;

    height:
        25px;

    margin:
        auto;

    border:
        1px solid white;

}


.perfume-body {

    width:
        120px;

    height:
        160px;

    border:
        1px solid white;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    font-size:
        50px;

    margin-top:
        5px;

}


.danese-text {

    position:
        absolute;

    bottom:
        35px;

    width:
        calc(100% - 100px);

    font-size:
        9px;

    letter-spacing:
        5px;

}


/* =========================================================
   MIR4
========================================================= */

.mir4-preview {

    height:
        100%;

    background:
        radial-gradient(
            circle at center,
            #303030,
            #050505 70%
        );

    overflow:
        hidden;

}


.mir4-logo {

    position:
        absolute;

    top:
        60px;

    left:
        45px;

    font-size:
        38px;

    font-weight:
        900;

    letter-spacing:
        -3px;

}


.mir4-character {

    position:
        absolute;

    width:
        170px;

    height:
        290px;

    left:
        55%;

    top:
        48%;

    transform:
        translate(-50%,-50%);

    border:
        2px solid white;

    clip-path:
        polygon(
            50% 0,
            72% 20%,
            65% 45%,
            100% 100%,
            50% 80%,
            0 100%,
            35% 45%,
            28% 20%
        );

    animation:
        gameFloat 4s ease-in-out infinite;

}


.mir4-ui {

    position:
        absolute;

    bottom:
        45px;

    left:
        45px;

    display:
        flex;

    gap:
        8px;

}


.mir4-ui i {

    width:
        25px;

    height:
        25px;

    border:
        1px solid #aaa;

}


.mir4-text {

    position:
        absolute;

    right:
        45px;

    bottom:
        45px;

    font-size:
        9px;

    letter-spacing:
        5px;

}


/* =========================================================
   PROJECT INFO
========================================================= */

.project-info {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    padding:
        20px 5px;

}


.project-info small {

    display:
        block;

    font-size:
        8px;

    letter-spacing:
        2px;

    color:
        #666;

    margin-bottom:
        7px;

}


.project-info h3 {

    font-size:
        18px;

}


.project-info h3 small {

    display:
        inline;

    font-size:
        8px;

    margin-left:
        5px;

}


.project-info > span {

    font-size:
        22px;

    transition:
        .4s;

}


.project:hover
.project-info > span {

    transform:
        translate(5px,-5px);

}


/* =========================================================
   CTA
========================================================= */

.cta {

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:
        #f0f0f0;

    color:
        #050505;

}


.cta-lines {

    position:
        absolute;

    inset:
        -50%;

    background:

        linear-gradient(
            115deg,
            transparent 48%,
            rgba(0,0,0,.1) 49%,
            transparent 50%
        );

    background-size:
        100px 100px;

    animation:
        diagonalMove 15s linear infinite;

}


.cta-content {

    position:
        relative;

    z-index:
        2;

}


.cta-content > span {

    font-size:
        10px;

    letter-spacing:
        4px;

}


.cta h2 {

    margin:
        30px 0 50px;

    font-size:
        clamp(60px,9vw,130px);

    line-height:
        .8;

    letter-spacing:
        -8px;

}


.cta h2 em {

    display:
        block;

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

}


.cta-button {

    display:
        inline-flex;

    gap:
        25px;

    align-items:
        center;

    padding:
        18px 30px;

    border:
        1px solid black;

    border-radius:
        50px;

    font-size:
        10px;

    font-weight:
        bold;

    transition:
        .4s;

}


.cta-button:hover {

    background:
        black;

    color:
        white;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    min-height:
        100px;

    padding:
        0 5vw;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    border-top:
        1px solid var(--border);

    font-size:
        9px;

}


.footer-logo {

    font-size:
        28px;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.footer-logo span {

    font-weight:
        400;

}


.footer-center {

    color:
        #666;

    letter-spacing:
        2px;

}


.footer-right {

    color:
        #666;

}


/* =========================================================
   REVEAL
========================================================= */

.section,
.project,
.service-card {

    opacity:
        0;

    transform:
        translateY(50px);

    transition:
        opacity 1s var(--ease),
        transform 1s var(--ease);

}


.section.visible,
.project.visible,
.service-card.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* stagger */

.projects-grid
.project:nth-child(2) {

    transition-delay:
        .1s;

}

.projects-grid
.project:nth-child(3) {

    transition-delay:
        .2s;

}

.projects-grid
.project:nth-child(4) {

    transition-delay:
        .3s;

}

.projects-grid
.project:nth-child(5) {

    transition-delay:
        .1s;

}

.projects-grid
.project:nth-child(6) {

    transition-delay:
        .2s;

}

.projects-grid
.project:nth-child(7) {

    transition-delay:
        .3s;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroTitle {

    from {

        opacity:
            0;

        transform:
            translateY(70px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(25px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes marquee {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}


@keyframes pulse {

    0%,
    100% {

        transform:
            scale(.8);

        opacity:
            .15;

    }

    50% {

        transform:
            scale(1.15);

        opacity:
            .6;

    }

}


@keyframes gameFloat {

    0%,
    100% {

        transform:
            translate(-50%,-50%)
            translateY(0);

    }

    50% {

        transform:
            translate(-50%,-50%)
            translateY(-15px);

    }

}


@keyframes diagonalMove {

    from {

        transform:
            translate(-100px,-100px);

    }

    to {

        transform:
            translate(100px,100px);

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .nav {

        gap:
            10px;

    }


    .nav a {

        min-width:
            auto;

        padding:
            8px 15px;

    }


    .hero-symbol {

        opacity:
            .25;

        right:
            -30px;

    }


    .services-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .about-content {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

}


@media (max-width: 700px) {

    body {

        cursor:
            auto;

    }


    .cursor,
    .cursor-follower {

        display:
            none;

    }


    .header {

        height:
            80px;

        padding:
            0 20px;

    }


    .logo {

        font-size:
            28px;

    }


    .nav {

        gap:
            5px;

    }


    .nav a {

        padding:
            7px 10px;

        font-size:
            10px;

    }


    .nav a:nth-child(3) {

        display:
            none;

    }


    .hero {

        padding:
            130px 25px 80px;

        min-height:
            850px;

    }


    .hero h1 {

        font-size:
            60px;

        letter-spacing:
            -4px;

    }


    .hero-symbol {

        opacity:
            .12;

        right:
            -80px;

        top:
            55%;

    }


    .hero-scroll {

        left:
            25px;

    }


    .section {

        padding:
            100px 25px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .project-preview {

        height:
            350px;

    }


    .portfolio-header {

        display:
            block;

    }


    .portfolio-header h2 {

        margin-top:
            20px;

    }


    .cta {

        min-height:
            550px;

    }


    .cta h2 {

        font-size:
            65px;

        letter-spacing:
            -5px;

    }


    footer {

        flex-direction:
            column;

        gap:
            20px;

        padding:
            35px 20px;

    }

}


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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}