span.ml-2.w-full.text-red-900.dark\:text-red-100.text-sm.smooth {
        color: white;
    }

    .flex.flex-col.space-y-4.w-full {
        margin-top: 0;
    }

    .text-purple-700 {
        --tw-text-opacity: 1;
        color: rgb(126 34 206/var(--tw-text-opacity))
    }

    .text-red-500 {
        --tw-text-opacity: 1;
        color: rgb(239 68 68/var(--tw-text-opacity))
    }

    .text-red-600 {
        --tw-text-opacity: 1;
        color: rgb(220 38 38/var(--tw-text-opacity))
    }

    .text-red-900 {
        --tw-text-opacity: 1;
        color: rgb(127 29 29/var(--tw-text-opacity))
    }

    .text-rose-100 {
        --tw-text-opacity: 1;
        color: rgb(255 228 230/var(--tw-text-opacity))
    }

    .bg-cyan-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(8 145 178/var(--tw-bg-opacity))
    }

    .bg-cyan-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(14 116 144/var(--tw-bg-opacity))
    }

    .bg-cyan-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(21 94 117/var(--tw-bg-opacity))
    }

    .bg-cyan-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(22 78 99/var(--tw-bg-opacity))
    }

    .bg-emerald-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(209 250 229/var(--tw-bg-opacity))
    }

    .bg-emerald-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(167 243 208/var(--tw-bg-opacity))
    }

    .bg-emerald-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(52 211 153/var(--tw-bg-opacity))
    }

    .bg-emerald-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(16 185 129/var(--tw-bg-opacity))
    }

    .bg-emerald-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(5 150 105/var(--tw-bg-opacity))
    }

    .bg-emerald-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(4 120 87/var(--tw-bg-opacity))
    }

    .bg-emerald-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(6 95 70/var(--tw-bg-opacity))
    }

    .bg-fuchsia-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(245 208 254/var(--tw-bg-opacity))
    }

    .bg-fuchsia-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(232 121 249/var(--tw-bg-opacity))
    }

    .bg-fuchsia-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(217 70 239/var(--tw-bg-opacity))
    }

    .bg-gray-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(243 244 246/var(--tw-bg-opacity))
    }

    .bg-gray-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(229 231 235/var(--tw-bg-opacity))
    }

    .bg-gray-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(209 213 219/var(--tw-bg-opacity))
    }

    .bg-gray-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(156 163 175/var(--tw-bg-opacity))
    }

    .bg-gray-50 {
        --tw-bg-opacity: 1;
        background-color: rgb(249 250 251/var(--tw-bg-opacity))
    }

    .bg-gray-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(107 114 128/var(--tw-bg-opacity))
    }

    section.main-section.negative-nav-margin {
        background: url(https://kareem-mohamed.com/images/bg-star-dark.9f20991fbadc02c0541d.png);
    }


    a.border-2.smooth.false.w-full.block.flex-center-both.bg-rose-500.border-rose-500.dark\:bg-rose-500.dark\:border-rose-500.hover\:bg-opacity-0.dark\:hover\:bg-opacity-0.dark\:bg-opacity-100.bg-opacity-100.hover\:text-rose-500.dark\:hover\:text-rose-500.clr-white.rounded-md.px-4.py-2 {
        background: rgb(33 159 148 /var(--tw-bg-opacity));
        border-color: rgb(33 159 148 /var(--tw-border-opacity));
    }

    a.border-2.smooth.false.w-full.block.flex-center-both.bg-rose-500.border-rose-500.dark\:bg-rose-500.dark\:border-rose-500.hover\:bg-opacity-0.dark\:hover\:bg-opacity-0.dark\:bg-opacity-100.bg-opacity-100.hover\:text-rose-500.dark\:hover\:text-rose-500.clr-white.rounded-md.px-4.py-2:hover {
        color: rgb(33 159 148 / var(--tw-text-opacity));
    }

    a.w-\[200px\].flex-center-both.rounded-xl.space-x-reverse.space-x-4.relative.group.bg-red-100.dark\:bg-red-900.smooth.text-slate-50.hover\:bg-opacity-50 {
        background-color: rgb(107 129 132);
    }

    .relative.w-fit.flex.items-center.pr-2.pl-1\.5.pt-0\.5.smooth.border-4.rounded-xl.bg-red-500.border-red-500 {
        background: #5c6466;
        border-color: #5c6466;
    }


    a.w-\[200px\].flex-center-both.rounded-xl.space-x-reverse.space-x-4.relative.group.bg-yellow-100.dark\:bg-yellow-900.smooth.text-slate-50.hover\:bg-opacity-50 {
        background: #b2dfdf;
    }

    span.ml-2.w-full.text-yellow-900.dark\:text-yellow-100.text-sm.smooth {
        color: black;
    }

    .relative.w-fit.flex.items-center.pr-2.pl-1\.5.pt-0\.5.smooth.border-4.rounded-xl.bg-yellow-500.border-yellow-500 {
        background: #90d4d6;
        border-color: #90d4d7;
    }

    a.w-\[200px\].flex-center-both.rounded-xl.space-x-reverse.space-x-4.relative.group.bg-orange-100.dark\:bg-orange-900.smooth.text-slate-50.hover\:bg-opacity-50 {
        background: #1f7d75;
    }

    .relative.w-fit.flex.items-center.pr-2.pl-1\.5.pt-0\.5.smooth.border-4.rounded-xl.bg-orange-500.border-orange-500 {
        background: #219f94;
        border-color: #219f94;
    }

    .arrow span {
        border-bottom-color: #b2dfdf;
        border-right-color: #b2dfdf;
    }

    .space-y-4 {
        margin-bottom: calc(1.5rem*var(--tw-space-y-reverse));
        margin-top: calc(1.5rem*(1 - var(--tw-space-y-reverse)));
    }


    @font-face {
        font-family: 'jazeera';
        src: url(https://kareem-mohamed.com/core/views/infinity-teacher-child/static/media/Al-Jazeera-Arabic-Bold_0.15fb55d82efcb50d371b.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    .font-jazeera {
        font-family: 'Cairo';
    }


    .w-\[200px\] {
        width: 200px;
    }

    .w-\[250px\] {
        width: 250px
    }

    .w-\[340px\] {
        width: 340px
    }



    @media (min-width: 768px) {
        .md\:static {
            position: static
        }

        .md\:inset-auto {
            inset: auto
        }

        .md\:-top-20 {
            top: -5rem
        }

        .md\:-top-24 {
            top: -6rem
        }

        .md\:left-10 {
            left: 2.5rem
        }

        .md\:col-span-2 {
            grid-column: span 2/span 2
        }

        .md\:mx-0 {
            margin-left: 0;
            margin-right: 0
        }

        .md\:mx-10 {
            margin-left: 2.5rem;
            margin-right: 2.5rem
        }

        .md\:mx-3 {
            margin-left: .75rem;
            margin-right: .75rem
        }

        .md\:mx-5 {
            margin-left: 1.25rem;
            margin-right: 1.25rem
        }

        .md\:block {
            display: block
        }

        .md\:hidden {
            display: none
        }

        .md\:h-20 {
            height: 5rem
        }

        .md\:h-fit {
            height: fit-content
        }

        .md\:h-screen {
            height: 100vh
        }

        .md\:w-1\/2 {
            width: 50%
        }

        .md\:w-20 {
            width: 5rem
        }

        .md\:w-24 {
            width: 6rem
        }

        .md\:w-3\/4 {
            width: 75%
        }

        .md\:w-8 {
            width: 2rem
        }

        .md\:w-\[600px\] {
            width: 600px
        }

        .md\:w-\[70\%\] {
            width: 70%
        }

        .md\:w-auto {
            width: auto
        }

        .md\:w-full {
            width: 100%
        }

        .md\:min-w-min {
            min-width: min-content
        }

        .md\:max-w-md {
            max-width: 28rem
        }

        .md\:basis-1\/2 {
            flex-basis: 50%
        }

        .md\:basis-1\/3 {
            flex-basis: 33.333333%
        }

        .md\:basis-2\/3 {
            flex-basis: 66.666667%
        }

        .md\:scale-y-100 {
            --tw-scale-y: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:flex-row-reverse {
            flex-direction: row-reverse
        }

        .md\:items-start {
            align-items: flex-start
        }

        .md\:items-center {
            align-items: center
        }

        .md\:justify-end {
            justify-content: flex-end
        }

        .md\:justify-center {
            justify-content: center
        }

        .md\:gap-20 {
            gap: 5rem
        }

        .md\:gap-\[120px\] {
            gap: 120px
        }

    }

    @media (min-width: 1024px) {
        .lg\:absolute {
            position: absolute
        }

        .lg\:inset-0 {
            inset: 0
        }

        .lg\:col-span-2 {
            grid-column: span 2/span 2
        }

        .lg\:col-span-3 {
            grid-column: span 3/span 3
        }

        .lg\:mx-0 {
            margin-left: 0;
            margin-right: 0
        }

        .lg\:mb-\[10rem\] {
            margin-bottom: 10rem
        }

        .lg\:mr-0 {
            margin-right: 0
        }

        .lg\:mt-0 {
            margin-top: 0
        }

        .lg\:mt-14 {
            margin-top: 3.5rem
        }

        .lg\:mt-24 {
            margin-top: 6rem
        }

        .lg\:flex {
            display: flex
        }

        .lg\:hidden {
            display: none
        }

        .lg\:h-16 {
            height: 4rem
        }

        .lg\:h-\[129px\] {
            height: 129px
        }

        .lg\:h-full {
            height: 100%
        }

        .lg\:h-screen {
            height: 100vh
        }

        .lg\:min-h-screen {
            min-height: 100vh
        }

        .lg\:w-16 {
            width: 4rem
        }

        .lg\:w-24 {
            width: 6rem
        }

        .lg\:w-3\/4 {
            width: 75%
        }

        .lg\:w-32 {
            width: 8rem
        }

        .lg\:w-64 {
            width: 16rem
        }

        .lg\:w-8 {
            width: 2rem
        }

        .lg\:w-80 {
            width: 20rem
        }

        .lg\:w-\[120px\] {
            width: 120px
        }

        .lg\:w-\[60\%\] {
            width: 60%
        }

        .lg\:w-\[90\%\] {
            width: 90%
        }

        .lg\:w-auto {
            width: auto
        }

        .lg\:max-w-\[800px\] {
            max-width: 800px
        }

        .lg\:basis-1\/2 {
            flex-basis: 50%
        }

        .lg\:basis-2\/5 {
            flex-basis: 40%
        }

        .lg\:basis-3\/5 {
            flex-basis: 60%
        }

        .lg\:basis-4\/6 {
            flex-basis: 66.666667%
        }

        .lg\:-translate-y-1\/2 {
            --tw-translate-y: -50%
        }

        .lg\:-translate-y-1\/2,
        .lg\:translate-x-1\/2 {
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .lg\:translate-x-1\/2 {
            --tw-translate-x: 50%
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:flex-row-reverse {
            flex-direction: row-reverse
        }

        .lg\:items-start {
            align-items: flex-start
        }

        .lg\:items-center {
            align-items: center
        }

        .lg\:justify-start {
            justify-content: flex-start
        }

        .lg\:justify-end {
            justify-content: flex-end
        }

        .lg\:justify-center {
            justify-content: center
        }

        .lg\:justify-between {
            justify-content: space-between
        }

        .lg\:gap-0 {
            gap: 0
        }

        .lg\:gap-10 {
            gap: 2.5rem
        }

        .lg\:gap-12 {
            gap: 3rem
        }

        .lg\:gap-20 {
            gap: 5rem
        }

        .lg\:space-x-2>:not([hidden])~:not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)));
            margin-right: calc(.5rem*var(--tw-space-x-reverse))
        }

        .lg\:space-x-20>:not([hidden])~:not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-left: calc(5rem*(1 - var(--tw-space-x-reverse)));
            margin-right: calc(5rem*var(--tw-space-x-reverse))
        }

        .lg\:space-x-4>:not([hidden])~:not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-left: calc(1rem*(1 - var(--tw-space-x-reverse)));
            margin-right: calc(1rem*var(--tw-space-x-reverse))
        }

        .lg\:space-y-0>:not([hidden])~:not([hidden]) {
            --tw-space-y-reverse: 0;
            margin-bottom: calc(0px*var(--tw-space-y-reverse));
            margin-top: calc(0px*(1 - var(--tw-space-y-reverse)))
        }

        .lg\:space-y-5>:not([hidden])~:not([hidden]) {
            --tw-space-y-reverse: 0;
            margin-bottom: calc(1.25rem*var(--tw-space-y-reverse));
            margin-top: calc(1.25rem*(1 - var(--tw-space-y-reverse)))
        }

        .lg\:space-x-reverse>:not([hidden])~:not([hidden]) {
            --tw-space-x-reverse: 1
        }

        .lg\:self-start {
            align-self: flex-start
        }

        .lg\:p-10 {
            padding: 2.5rem
        }

        .lg\:px-10 {
            padding-left: 2.5rem;
            padding-right: 2.5rem
        }

        .lg\:px-4 {
            padding-left: 1rem;
            padding-right: 1rem
        }

        .lg\:px-40 {
            padding-left: 10rem;
            padding-right: 10rem
        }

        .lg\:px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem
        }

        .lg\:px-8 {
            padding-left: 2rem;
            padding-right: 2rem
        }

        .lg\:px-\[60px\] {
            padding-left: 60px;
            padding-right: 60px
        }

        .lg\:py-\[30px\] {
            padding-bottom: 30px;
            padding-top: 30px
        }

        .lg\:pb-20 {
            padding-bottom: 5rem
        }

        .lg\:pt-0 {
            padding-top: 0
        }

        .lg\:pt-1 {
            padding-top: .25rem
        }

        .lg\:text-right {
            text-align: right
        }

        .lg\:text-2xl {
            font-size: 1.5rem;
            line-height: 2rem
        }

        .lg\:text-3xl {
            font-size: 1.875rem;
            line-height: 2.25rem
        }

        .lg\:text-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem
        }

        .lg\:text-5xl {
            font-size: 3rem;
            line-height: 1
        }

        .lg\:text-base {
            font-size: 1rem;
            line-height: 1.5rem
        }

        .lg\:text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem
        }
    }

    @media (min-width: 1280px) {
        .xl\:h-80 {
            height: 20rem
        }

        .xl\:w-1\/2 {
            width: 50%
        }

        .xl\:w-3\/4 {
            width: 75%
        }

        .xl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .xl\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }

        .xl\:items-start {
            align-items: flex-start
        }

        .xl\:gap-5 {
            gap: 1.25rem
        }

        .xl\:text-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem
        }

        .xl\:text-5xl {
            font-size: 3rem;
            line-height: 1
        }

        .xl\:text-6xl {
            font-size: 3.75rem;
            line-height: 1
        }
    }

    @media (min-width: 1536px) {
        .\32xl\:h-96 {
            height: 24rem
        }

        .\32xl\:w-3\/4 {
            width: 75%
        }
    }

    .navbar {
        height: calc(var(--navbar-height))
    }

    .top-navbar-height {
        top: calc(var(--navbar-height))
    }

    .hide-top {
        transform: translateY(-100%)
    }



    .scale {
        transform: scale(1);
        transform: scale(var(--scale-90))
    }

    .scale:hover {
        transform: scale(1.15);
        transform: scale(var(--scale-100))
    }

    .scale:focus {
        transform: scale(.9);
        transform: scale(var(--scale-95))
    }



    .vipFont {
        font-family: VipHalaBold, sans-serif;
        font-family: var(--font-vip)
    }

    body {
        background-color: #fff;
        background-color: var(--color-primary-container);
        color: #111827;
        color: var(--color-text-primary);
        direction: rtl;
        font-family: Almarai;
        font-family: var(--font-family);
        font-size: .938rem;
        font-size: var(--font-size-normal);
        font-weight: 400;
        font-weight: var(--font-w-normal);
        margin-top: 5rem;
        margin-top: var(--body-top);
        overflow-x: hidden;
        padding-right: 0 !important;
        text-align: right
    }

    body.collapsed-side-nav {
        --side-navbar-width: var(--side-navbar-collapsed-width)
    }

    body.modal-open {
        overflow-y: auto !important
    }

    li,
    ul {
        list-style: none
    }

    *,
    h1,
    h2,
    h3,
    h4,
    h5,
    label,
    li,
    p,
    ul {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    .hover-shadow:not(.not-allowed):hover {
        box-shadow: 0 7px 10px 0 #0003;
        transform: scale(1.03)
    }

    .hover-shadow-large:not(.not-allowed):hover {
        box-shadow: -7px 15px 40px -5px #0006;
        box-shadow: -7px 15px 40px -5px var(--color-shadow-large);
        transform: scale(1.03)
    }

    .group:hover .group-hover\:shadow:not(.not-allowed) {
        box-shadow: 0 7px 10px 0 #0003;
        transform: scale(1.03)
    }

    .group:hover .group-hover\:shadow-large:not(.not-allowed) {
        box-shadow: -7px 15px 40px -5px #0006;
        box-shadow: -7px 15px 40px -5px var(--color-shadow-large);
        transform: scale(1.03)
    }

    .ar {
        direction: rtl;
        text-align: right
    }

    .en {
        text-align: left
    }

    .en,
    .ltr {
        direction: ltr
    }

    .rtl {
        direction: rtl
    }

    .smooth {
        transition: all .4s ease;
        transition: all var(--transition-smooth) ease
    }

    .smooth-slow {
        transition: all .6s ease;
        transition: all var(--transition-very-smooth) ease
    }

    .smooth-fast {
        transition: all .2s ease;
        transition: all var(--transition-fast) ease
    }

    .shadow-large {
        box-shadow: 0 0 20px #0006;
        box-shadow: 0 0 var(--shadow-large)
    }

    .shadow-large--oblique {
        box-shadow: -5px 5px 20px #0006;
        box-shadow: -5px 5px var(--shadow-large)
    }

    .shadow-medium {
        box-shadow: 0 0 10px #0004;
        box-shadow: 0 0 var(--shadow-medium)
    }

    .shadow-medium--oblique {
        box-shadow: -3px 3px 10px #0004;
        box-shadow: -3px 3px var(--shadow-medium)
    }

    .shadow-small {
        box-shadow: 0 0 5px #0002;
        box-shadow: 0 0 var(--shadow-small)
    }

    .shadow-small--oblique {
        box-shadow: -1px 1px 5px #0002;
        box-shadow: -1px 1px var(--shadow-small)
    }

    .me-shadow:before {
        background: radial-gradient(ellipse at center, #00000059 0, #0000 80%);
        content: "";
        height: 10px;
        left: 5%;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        transition-duration: .3s;
        transition-property: transform, opacity;
        width: 90%;
        z-index: -1
    }

    .me-shadow:active:before,
    .me-shadow:focus:before,
    .me-shadow:hover:before {
        opacity: 1;
        transform: translateY(5px)
    }

    .rounded-circle {
        border-radius: 100%
    }

    .divider-1 {
        height: 1px;
        width: 100%
    }

    .divider-2 {
        height: 2px;
        width: 100%
    }

    .divider-3 {
        height: 3px;
        width: 100%
    }

    .nice_scroll::-webkit-scrollbar {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        width: var(--scroll-width)
    }

    .nice_scroll::-webkit-scrollbar-track {
        background: #fff;
        background: var(--color-primary-container)
    }

    .nice_scroll::-webkit-scrollbar-thumb {
        background: #075985
    }

    .glassy {
        --box-border: #ffffff40;
        --back-color: #0001;
        -webkit-backdrop-filter: saturate(180%) blur(5px);
        backdrop-filter: saturate(180%) blur(5px);
        background-color: var(--back-color);
        border-left: 1px solid var(--box-border);
        border-top: 1px solid var(--box-border)
    }

    .darkmode .glassy {
        --box-border: #fff3;
        --back-color: #fff1
    }

    .non-blur-glassy {
        --box-border: #ffffff40;
        --back-color: #0001;
        background-color: var(--back-color);
        border-left: 1px solid var(--box-border);
        border-top: 1px solid var(--box-border)
    }

    .darkmode .non-blur-glassy {
        --box-border: #fff3;
        --back-color: #fff1
    }

    .glassy--border {
        --box-border: #dfdfdf;
        --back-color: #fff2;
        border-left: 4px solid var(--box-border);
        border-top: 4px solid var(--box-border)
    }

    .darkmode .glassy--border {
        --box-border: #fff3;
        --back-color: #fff1
    }

    .glassy\:border-1 {
        --box-border: #dfdfdf;
        --back-color: #fff2;
        border-left: 1px solid var(--box-border);
        border-top: 1px solid var(--box-border)
    }

    .darkmode .glassy\:border-1 {
        --box-border: #fff3;
        --back-color: #fff1
    }

    @keyframes toSpin {
        0% {
            transform: rotate(0deg)
        }

        to {
            transform: rotate(1turn)
        }
    }

    @keyframes toSpinReverse {
        0% {
            transform: rotate(0deg)
        }

        to {
            transform: rotate(-1turn)
        }
    }

    @keyframes shake {
        0% {
            transform: rotate(0deg)
        }

        25% {
            transform: rotate(10deg)
        }

        75% {
            transform: rotate(-10deg)
        }

        to {
            transform: rotate(0deg)
        }
    }

    .tospin {
        --duration: 5000ms;
        animation-duration: var(--duration);
        animation-iteration-count: infinite;
        animation-name: toSpin;
        animation-timing-function: linear
    }

    .spin-duration-slow {
        --duration: 15000ms
    }

    .spin-duration-xslow {
        --duration: 30000ms
    }

    .mobile-row-col {
        display: flex;
        flex-direction: column
    }

    .mobile-flex-center-both {
        align-items: center;
        display: flex;
        justify-content: center
    }

    @media screen and (min-width: 768px) {
        .mobile-row-col {
            flex-direction: row
        }

        .mobile-flex-center-both {
            align-items: normal;
            display: flex;
            justify-content: normal
        }
    }

    .flex-center-x {
        display: flex;
        justify-content: center
    }

    .flex-center-both,
    .flex-center-y {
        align-items: center;
        display: flex
    }

    .flex-center-both {
        justify-content: center
    }

    .flex-item {
        flex: 1 1
    }

    .font-ruqaa {
        font-family: Aref Ruqaa, serif
    }