@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
     :root {
        --prime: #69b95d;
        --break: #0054B4;
        --grade: linear-gradient(8deg, #078344, #067443, #52cc2b, #6cef3d, #cde843);
    }
    
    * {
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
    }
    
    ul#tar,
    section#vid {
        z-index: 99999;
    }
    
    html[lang="ar"] {
        direction: rtl;
    }
    
    html[lang="ar"] .controls a:first-child {
        clip-path: polygon(0 0, 100% 50%, 0 100%, 0 80%, 60% 50%, 0 20%);
    }
    
    html[lang="ar"] .controls a:last-child {
        clip-path: polygon(100% 0, 100% 20%, 40% 50%, 100% 80%, 100% 100%, 0 50%);
    }
    
    html[lang="ar"] .box:first-child {
        margin-left: 0rem;
    }
    
    html[lang="ar"] .box:last-child {
        margin-left: 1rem;
    }
    
    body {
        background-position: center;
        background-repeat: repeat-y;
        background-size: cover;
        background-image: url(/assets/bg.png);
    }
    
    .reset * {
        all: revert;
    }
    
    .text-prime {
        color: var(--prime);
    }
    
    .text-break {
        color: var(--break);
    }
    
    .text-grade {
        background: var(--grade);
        -webkit-text-stroke: 0.5px #FFFFFF;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .text-stroke {
        -webkit-text-stroke: 0.5px #1d1d;
    }
    
    .hover\:text-prime:hover {
        color: var(--prime);
    }
    
    .hover\:text-break:hover {
        color: var(--break);
    }
    
    .bg-prime {
        background-color: var(--prime);
    }
    
    .bg-break {
        background-color: var(--break);
    }
    
    .bg-grade {
        background-color: var(--prime);
        background: var(--grade);
    }
    
    .border-prime {
        border-color: var(--prime);
    }
    
    .border-break {
        border-color: var(--break);
    }
    
    .link {
        position: relative;
    }
    
    .link.active {
        color: var(--prime)
    }
    
    .link::before,
    .link::after {
        content: "";
        width: 100%;
        height: 2px;
        background-color: var(--prime);
        display: block;
        position: absolute;
        top: 110%;
        left: 0;
        opacity: 0;
    }
    
    .link.active::before,
    .link:hover::before {
        opacity: 1;
    }
    
    .back {
        /* background-color: hsla(0, 0%, 11%, 0.30); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    
    .back::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: hsl(212, 100%, 35%, .2);
        z-index: -1;
    }
    
    .slide {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
    }
    
    .slide img {
        object-fit: cover;
        object-position: center;
    }
    
    .active {
        transform: translateX(0%) translateZ(0);
        transition: 0.5s all cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100;
    }
    
    .prev {
        transform: translateX(-100%) translateZ(0);
        transition: 0.5s all cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 90;
    }
    
    .next {
        transform: translateX(100%) translateZ(0);
        transition: 0.5s all cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 90;
    }
    
    .controls {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 110;
        left: 0;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        font-size: 2rem;
        font-weight: bolder;
        color: rgb(255, 255, 255);
        pointer-events: none;
    }
    
    .controls a {
        width: 2rem;
        height: 2rem;
        background-color: #fcfcfc;
        pointer-events: auto;
    }
    
    .controls:focus {
        outline: auto;
    }
    
    .abs {
        position: absolute !important;
    }
    
    .controls a:first-child {
        clip-path: polygon(100% 0, 100% 20%, 40% 50%, 100% 80%, 100% 100%, 0 50%);
    }
    
    .controls a:last-child {
        clip-path: polygon(0 0, 100% 50%, 0 100%, 0 80%, 60% 50%, 0 20%);
    }
    
    .box {
        margin-right: 1rem;
    }
    
    .box:first-child {
        margin-left: 1rem;
    }
    
    .scroll::-webkit-scrollbar {
        display: none;
    }
    
    .scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .logo__header {
        animation: fade-from-right 0.6s;
    }
    
    .text__h1 {
        animation: fade-from-up 0.6s;
    }
    
    .text__h2 {
        animation: fade-from-left 0.6s;
    }
    
    .product {
        z-index: 1;
        background: var(--grade);
    }
    
    .product::before {
        content: "";
        position: absolute;
        width: calc(100% - 5px);
        height: calc(100% - 5px);
        background: #FFFFFF;
        top: 50%;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, -50%);
        border-radius: .9rem;
    }
    
    .text-stroke {
        -webkit-text-stroke: .5px #1d1d;
    }
    
    .prod {
        aspect-ratio: 1 / 1;
    }
    
    .w-025 {
        width: calc(50% - .5rem) !important;
    }
    
    .z-100 {
        z-index: 9999;
    }
    
    .max-60 {
        max-width: 100px;
    }
    
    .line {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
        overflow: hidden;
    }
    
    @media (min-width: 1024px) {
        html[lang="ar"] .w-ar {
            width: 8rem;
        }
        .w-200 {
            width: 23% !important;
        }
        .w-033 {
            width: calc(33.33% - (2rem / 3)) !important;
        }
        .h-12rem {
            height: 12rem;
        }
    }
    
    @keyframes fade-from-up {
        0% {
            opacity: 0;
            transform: translateY(-50px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }
    
    @keyframes fade-from-right {
        0% {
            opacity: 0;
            transform: translateX(-60px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }
    
    @keyframes fade-from-left {
        0% {
            opacity: 0;
            transform: translateX(90px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }