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
                                    }