:root {
    --color-primary: #03001c;
    --color-primary-light: #353349;

    --color-cyan-light: #22d3ee;
    --color-cyan-lighten: #64e0f3;
    --color-cyan-dark: #0a3f47;

    --color-text-primary: #13605b;
}

/* CSS Reset */
*,
html,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Oxanium", sans-serif;
}

.dark {
    animation: dark-fade-in 0.3s ease-in;
}

.turn-off-dark {
    animation: dark-fade-out 0.3s ease-out;
}

@keyframes dark-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dark-fade-out {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.breadcrumbs {
    clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
}

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

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

[x-cloak] {
    display: none;
}

.triangle__notif__bell {
    position: absolute;
    right: 185px;
    top: 77px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@media screen and (max-width: 768px) {
    .triangle__notif__bell {
        right: 26px;
        top: 60px;
    }
}

.loader_notif {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: absolute;
    top: 65px;
    animation: rotate 1s linear infinite;
}

.loader_notif::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #353349;
    animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }

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

    50% {
        clip-path: polygon(
            50% 50%,
            0 0,
            100% 0,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }

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

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@media screen and (max-width: 768px) {
    .underline__magical {
        color: white;
        background-size: 100% 88%;
    }
}

/* Box Product Custom Loader */
.custom_loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 8px solid #0000;
    border-right-color: #54f4f397;
    position: relative;
    animation: s4 1s infinite linear;
}
.custom_loader:before,
.custom_loader:after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: inherit;
    animation: inherit;
    animation-duration: 2s;
}
.custom_loader:after {
    animation-duration: 4s;
}

.sidebar {
    width: 48px;
    transition: 0.05s;
}

.sidebar:hover {
    width: 256px;
    overflow: visible;
}

/* Checkout PAGE */
.dashed_border {
    border-top: 1px dashed rgb(100 116 139);
}

.preloader {
    text-align: center;
    max-width: 20em;
    width: 100%;
}

.cart {
    display: block;
    margin: 0 auto 1.5em auto;
    width: 8em;
    height: 8em;
}

.cart__lines,
.cart__top,
.cart__wheel1,
.cart__wheel2,
.cart__wheel-stroke {
    animation: cartLines 2s ease-in-out infinite;
}

.cart__lines {
    stroke: hsl(233, 90%, 55%);
}

.cart__top {
    animation-name: cartTop;
}

.cart__wheel1 {
    animation-name: cartWheel1;
    transform: rotate(-0.25turn);
    transform-origin: 43px 111px;
}

.cart__wheel2 {
    animation-name: cartWheel2;
    transform: rotate(0.25turn);
    transform-origin: 102px 111px;
}

.cart__wheel-stroke {
    animation-name: cartWheelStroke;
}

.cart__track {
    stroke: hsla(233, 10%, 10%, 0.1);
    transition: stroke var(0.3s);
}

/* Animations */
@keyframes msg {
    from {
        opacity: 1;
        visibility: visible;
    }

    99.9% {
        opacity: 0;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes cartLines {
    from,
    to {
        opacity: 0;
    }

    8%,
    92% {
        opacity: 1;
    }
}

@keyframes cartTop {
    from {
        stroke-dashoffset: -338;
    }

    50% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 338;
    }
}

@keyframes cartWheel1 {
    from {
        transform: rotate(-0.25turn);
    }

    to {
        transform: rotate(2.75turn);
    }
}

@keyframes cartWheel2 {
    from {
        transform: rotate(0.25turn);
    }

    to {
        transform: rotate(3.25turn);
    }
}

@keyframes cartWheelStroke {
    from,
    to {
        stroke-dashoffset: 81.68;
    }

    50% {
        stroke-dashoffset: 40.84;
    }
}

@keyframes s4 {
    100% {
        transform: rotate(1turn);
    }
}

.flashsale_text {
    animation: glitch 2s linear infinite;
}

@keyframes glitch {
    2%,
    64% {
        transform: translate(2px, 0) skew(0deg);
    }
    4%,
    60% {
        transform: translate(-2px, 0) skew(0deg);
    }
    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

.flashsale_text:before,
.flashsale_text:after {
    content: attr(title);
    position: absolute;
    left: 0;
}

.flashsale_text:before {
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop {
    2%,
    64% {
        transform: translate(2px, -2px);
    }
    4%,
    60% {
        transform: translate(-2px, 2px);
    }
    62% {
        transform: translate(13px, -1px) skew(-13deg);
    }
}

.flashsale_text:after {
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom {
    2%,
    64% {
        transform: translate(-2px, 0);
    }
    4%,
    60% {
        transform: translate(-2px, 0);
    }
    62% {
        transform: translate(-22px, 5px) skew(21deg);
    }
}

.flickity-viewport {
    height: 240px !important;
}

.discount_flashsale {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 51% 90%, 0% 100%);
}

.custom-scrollbar::-webkit-scrollbar-track {
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #e4e2e2;
}