body {
	font-family: "Almarai", sans-serif;
}

*,
:after,
:before {
	border: 0 solid
}

:after,
:before {
	--tw-content: ""
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-feature-settings: normal
}

body {
	margin: 0;
	line-height: inherit
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit
}

a {
	color: inherit;
	text-decoration: inherit
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0
}

button,
select {
	text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}

:-moz-focusring {
	outline: auto
}

:-moz-ui-invalid {
	box-shadow: none
}

progress {
	vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

summary {
	display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
	margin: 0
}

fieldset {
	margin: 0
}

fieldset,
legend {
	padding: 0
}

menu,
ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0
}

textarea {
	resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	opacity: 1;
	color: #9ca3af
}

input::placeholder,
textarea::placeholder {
	opacity: 1;
	color: #9ca3af
}

[role=button],
button {
	cursor: pointer
}

:disabled {
	cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
	display: block;
	vertical-align: middle
}

img,
video {
	max-width: 100%;
	height: auto
}

[hidden] {
	display: none
}

*,
:after,
:before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}



.top2{position:fixed;top:0px;z-index:1071; width:100%;padding:2rem 4rem;}
.top2_fixer{background: linear-gradient(180deg, rgba(29, 51, 103, 1) 0%, rgba(20, 34, 67, 1) 100%);
	background: rgb(29, 51, 103);padding-top: 0.5rem;
	padding-bottom: 0.5rem;}

.top2_fixer .w-28 {
	width: 80px;
	height: 55px;
}





.pointer-events-none {
	pointer-events: none
}

.static {
	position: static
}

.fixed {
	position: fixed
}

.absolute {
	position: absolute
}

.relative {
	position: relative
}

.bottom-4 {
	bottom: 1rem
}

.right-4 {
	right: 1rem
}

.top-1\/2 {
	top: 50%
}

.right-0 {
	right: 0
}

.top-0 {
	top: 0
}

.left-0 {
	left: 0
}

.left-1\/2 {
	left: 50%
}

.bottom-full {
	bottom: 100%
}

.top-full {
	top: 100%
}

.top-24 {
	top: 6rem
}

.right-10 {
	right: 2.5rem
}

.bottom-0 {
	bottom: 0
}

.z-10 {
	z-index: 10
}

.z-\[1000\] {
	z-index: 1000
}

.z-30 {
	z-index: 30
}

.z-20 {
	z-index: 20
}

.z-40 {
	z-index: 40
}

.z-50 {
	z-index: 50
}

.-z-10 {
	z-index: -10
}

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

.mx-auto {
	margin-left: auto;
	margin-right: auto
}

.mx-16 {
	margin-left: 4rem;
	margin-right: 4rem
}

.mb-6 {
	margin-bottom: 1.5rem
}

.mb-4 {
	margin-bottom: 1rem
}

.mb-3 {
	margin-bottom: .75rem
}

.mb-10 {
	margin-bottom: 2.5rem
}

.mb-5 {
	margin-bottom: 1.25rem
}

.mb-16 {
	margin-bottom: 4rem
}

.mb-8 {
	margin-bottom: 2rem
}

.mb-14 {
	margin-bottom: 3.5rem
}

.mb-12 {
	margin-bottom: 3rem
}

.mb-2 {
	margin-bottom: .5rem
}

.mb-32 {
	margin-bottom: 8rem
}

.flex {
	display: flex
}

.grid {
	display: grid
}

.hidden {
	display: none
}

.aspect-square {
	aspect-ratio: 1/1
}

.aspect-\[1\/1\.3\] {
	aspect-ratio: 1/1.3
}

.aspect-\[1\/0\.9\] {
	aspect-ratio: 1/.9
}

.aspect-\[16\/8\] {
	aspect-ratio: 16/8
}

.aspect-video {
	aspect-ratio: 16/9
}

.aspect-\[1\/0\.8\] {
	aspect-ratio: 1/.8
}

.aspect-\[1\/0\.4\] {
	aspect-ratio: 1/.4
}

.h-8\/10 {
	height: 80%
}

.h-full {
	height: 100%
}

.h-1\/10 {
	height: 10%
}

.h-9\/10 {
	height: 90%
}

.h-auto {
	height: auto
}

.h-9 {
	height: 2.25rem
}

.h-10 {
	height: 2.5rem
}

.h-36 {
	height: 9rem
}

.h-32 {
	height: 8rem
}

.h-screen {
	height: 100vh
}

.h-96 {
	height: 24rem
}

.h-fit {
	height: -moz-fit-content;
	height: fit-content
}

.min-h-\[10rem\] {
	min-height: 10rem
}

.w-screen {
	width: 100vw
}

.w-16 {
	width: 4rem
}

.w-auto {
	width: auto
}

.w-full {
	width: 100%
}

.w-24 {
	width: 6rem
}

.w-14 {
	width: 3.5rem
}

.w-32 {
	width: 8rem
}

.w-9 {
	width: 2.25rem
}

.w-20 {
	width: 5rem
}

.w-28 {
	width: 7rem
}

.w-10 {
	width: 2.5rem
}

.w-fit {
	width: -moz-fit-content;
	width: fit-content
}

.w-80 {
	width: 20rem
}

.w-4 {
	width: 1rem
}

.w-8 {
	width: 2rem
}

.w-44 {
	width: 11rem
}

.w-48 {
	width: 12rem
}

.w-8\/10 {
	width: 80%
}

.w-\[40ch\] {
	width: 40ch
}

.w-9\/10 {
	width: 90%
}

.w-\[170\%\] {
	width: 170%
}

.w-40 {
	width: 10rem
}

.w-36 {
	width: 9rem
}

.w-96 {
	width: 24rem
}

.min-w-\[100vw\] {
	min-width: 100vw
}

.min-w-full {
	min-width: 100%
}

.max-w-\[100vw\] {
	max-width: 100vw
}

.max-w-\[30ch\] {
	max-width: 30ch
}
.max-w-\[31ch\] {
	max-width: 31ch
}

.basis-\[53\%\] {
	flex-basis: 53%
}

.basis-\[47\%\] {
	flex-basis: 47%
}

.basis-\[48\%\] {
	flex-basis: 48%
}

.basis-\[65\%\] {
	flex-basis: 65%
}

.basis-\[45\%\] {
	flex-basis: 45%
}

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

.basis-\[30\%\] {
	flex-basis: 30% !important;
}

.basis-\[70\%\] {
	flex-basis: 70%
}

.basis30 {width: 30%; display:inline-block; vertical-align:top; background:#008398;}
.basis30img{opacity:.6;}

.basis70{width: 69%; display:inline-block; vertical-align:top;}


.basis53{width: 53%; display:inline-block; vertical-align:top; background:#008398;}
.basis47{width: 46%; display:inline-block; vertical-align:top;}

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

.-translate-y-1\/2,
.translate-y-9\/10 {
	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))
}

.translate-y-9\/10 {
	--tw-translate-y: 100%
}


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

.-translate-x-1\/2,
.translate-y-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))
}

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

.translate-y-4 {
	--tw-translate-y: 1rem
}

.-translate-x-4,
.translate-y-4 {
	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))
}

.-translate-x-4 {
	--tw-translate-x: -1rem
}

.-translate-y-4 {
	--tw-translate-y: -1rem
}

.-translate-y-2,
.-translate-y-4 {
	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))
}

.-translate-y-2 {
	--tw-translate-y: -0.5rem
}

.-translate-y-\[25\%\] {
	--tw-translate-y: -25%
}

.-translate-y-16,
.-translate-y-\[25\%\] {
	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))
}

.-translate-y-16 {
	--tw-translate-y: -4rem
}

.translate-x-14 {
	--tw-translate-x: 3.5rem
}

.translate-x-14,
.translate-x-44 {
	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))
}

.translate-x-44 {
	--tw-translate-x: 11rem
}

.translate-y-20 {
	--tw-translate-y: 5rem
}

.translate-x-12,
.translate-y-20 {
	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))
}

.translate-x-12 {
	--tw-translate-x: 3rem
}

.translate-y-16 {
	--tw-translate-y: 4rem
}

.translate-y-16,
.translate-y-5 {
	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))
}

.translate-y-5 {
	--tw-translate-y: 1.25rem
}

.-translate-y-14 {
	--tw-translate-y: -3.5rem
}

.-translate-y-14,
.-translate-y-6 {
	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))
}

.-translate-y-6 {
	--tw-translate-y: -1.5rem
}

.scale-75 {
	--tw-scale-x: .75;
	--tw-scale-y: .75
}

.-scale-y-100,
.scale-75 {
	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))
}

.-scale-y-100 {
	--tw-scale-y: -1
}

.-scale-x-100 {
	--tw-scale-x: -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))
}

.cursor-pointer {
	cursor: pointer
}

.select-none {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.scroll-mt-28 {
	scroll-margin-top: 7rem
}

.scroll-mt-36 {
	scroll-margin-top: 9rem
}

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

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

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

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

.flex-col {
	flex-direction: column
}

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

.items-end {
	align-items: flex-end
}

.items-center {
	align-items: center
}

.items-stretch {
	align-items: stretch
}

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

.justify-center {
	justify-content: center
}

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

.justify-around {
	justify-content: space-around
}

.gap-10 {
	gap: 2.5rem
}

.gap-5 {
	gap: 1.25rem
}

.gap-4 {
	gap: 1rem
}

.gap-2 {
	gap: .5rem
}

.gap-6 {
	gap: 1.5rem
}

.gap-8 {
	gap: 2rem
}

.overflow-hidden {
	overflow: hidden
}

.overflow-clip {
	overflow: clip
}

.overflow-y-hidden {
	overflow-y: hidden
}

.whitespace-nowrap {
	white-space: nowrap
}

.rounded-full {
	border-radius: 9999px
}

.rounded-xl {
	border-radius: .75rem
}

.rounded-lg {
	border-radius: .5rem
}

.rounded-md {
	border-radius: .375rem
}

.rounded-2xl {
	border-radius: 1rem
}

.rounded-3xl {
	border-radius: 1.5rem
}

.rounded-t-xl {
	border-top-left-radius: .75rem;
	border-top-right-radius: .75rem
}

.rounded-b-xl {
	border-bottom-right-radius: .75rem;
	border-bottom-left-radius: .75rem
}

.rounded-l-2xl {
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem
}

.rounded-r-2xl {
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem
}

.border-\[1px\] {
	border-width: 1px
}

.border-2 {
	border-width: 2px
}

.border-t-2 {
	border-top-width: 2px
}

.border-green {
	--tw-border-opacity: 1;
	border-color: rgb(43 179 166/var(--tw-border-opacity))
}

.border-white {
	--tw-border-opacity: 1;
	border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.border-opacity-40 {
	--tw-border-opacity: 0.4
}

.border-opacity-70 {
	--tw-border-opacity: 0.7
}

.bg-green {
	--tw-bg-opacity: 1;
	background-color: rgb(43 179 166/var(--tw-bg-opacity))
}

.bg-black {
	--tw-bg-opacity: 1;
	background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.bg-blue {
	--tw-bg-opacity: 1;
	background-color: rgb(33 56 110/var(--tw-bg-opacity))
}

.bg-\[\#f5f5f5\] {
	--tw-bg-opacity: 1;
	background-color: rgb(245 245 245/var(--tw-bg-opacity))
}

.bg-opacity-0 {
	opacity: 0
}

.object-cover {
	-o-object-fit: cover;
	object-fit: cover
}

.p-6 {
	padding: 1.5rem
}

.p-7 {
	padding: 1.75rem
}

.p-14 {
	padding: 3.5rem
}

.p-2 {
	padding: .5rem
}

.p-10 {
	padding: 2.5rem
}

.px-1x2 {
	padding-left: 1.2rem;
	padding-right: 1.2rem
}

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

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

.py-1 {
	padding-top: .25rem;
	padding-bottom: .25rem
}

.py-10 {
	padding-top: 2.9rem;
	padding-bottom: 2.5rem
}

.px-28 {
	padding-left: 7rem;
	padding-right: 7rem
}

.px-32 {
	padding-left: 8rem;
	padding-right: 8rem
}

.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem
}

.px-16 {
	padding-left: 4rem;
	padding-right: 4rem
}

.py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem
}

.px-2 {
	padding-left: .5rem;
	padding-right: .5rem
}

.px-3 {
	padding-left: .75rem;
	padding-right: .75rem
}

.py-3 {
	padding-top: .75rem;
	padding-bottom: .75rem
}

.px-11 {
	padding-left: 2.75rem;
	padding-right: 2.75rem
}

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

.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem
}

.px-12 {
	padding-left: 3rem;
	padding-right: 3rem
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem
}

.pt-20 {
	padding-top: 5rem
}

.pt-8 {
	padding-top: 2rem
}


.pb-0 {
	padding-bottom: 0
}

.text-center {
	text-align: center
}

.text-justify {
	text-align: justify
}

.font-almarai {
	font-family: Almarai, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

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

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem
}

.text-\[0\.9rem\] {
	font-size: .9rem
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}

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

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

.text-xs {
	font-size: .75rem;
	line-height: 1rem
}

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

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

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

.font-medium {
	font-weight: 500
}

.font-semibold {
	font-weight: 600
}

.font-bold {
	font-weight: 700
}

.leading-7 {
	line-height: 1.75rem
}

.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity))
}

.text-blue {
	--tw-text-opacity: 1;
	color: rgb(33 56 110/var(--tw-text-opacity))
}

.text-green {
	--tw-text-opacity: 1;
	color: rgb(43 179 166/var(--tw-text-opacity))
}

.text-black {
	--tw-text-opacity: 1;
	color: rgb(0 0 0/var(--tw-text-opacity))
}

.opacity-0 {
	opacity: 0
}

.opacity-80 {
	opacity: .8
}

.opacity-60 {
	opacity: .6
}

.opacity-50 {
	opacity: .5
}

.shadow-glowblack {
	--tw-shadow: 0 0 10px 3px #00000030;
	--tw-shadow-colored: 0 0 10px 3px var(--tw-shadow-color)
}

.shadow-glowblack,
.shadow-glowblackSm {
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-glowblackSm {
	--tw-shadow: 0 0 5px 1.5px #00000020;
	--tw-shadow-colored: 0 0 5px 1.5px var(--tw-shadow-color)
}

.shadow-glowblackXl {
	--tw-shadow: 0 0 18px 5px #00000040;
	--tw-shadow-colored: 0 0 18px 5px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.brightness-\[10\] {
	--tw-brightness: brightness(10)
}

.brightness-\[10\],
.contrast-125 {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.contrast-125 {
	--tw-contrast: contrast(1.25)
}

.contrast-150 {
	--tw-contrast: contrast(1.5)
}

.contrast-150,
.grayscale {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.grayscale {
	--tw-grayscale: grayscale(100%)
}

.grayscale-0 {
	--tw-grayscale: grayscale(0);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.duration-700 {
	transition-duration: .7s
}

.duration-150 {
	transition-duration: .15s
}

.duration-500 {
	transition-duration: .5s
}

.duration-200 {
	transition-duration: .2s
}

.duration-300 {
	transition-duration: .3s
}

.duration-75 {
	transition-duration: 75ms
}

.ease-out {
	transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.gradient-mask-b-40 {
	-webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
	mask-image: linear-gradient(180deg, #000 40%, transparent)
}

.absCenter,
.absCover {
	position: absolute;
	top: 50%;
	left: 50%;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	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))
}

.absCover {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: 50%
}

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

html {
	scroll-behavior: smooth !important;
	max-width: 100vw !important;
	overflow-x: clip
}

*,
:after,
:before {
	box-sizing: border-box;
	padding: 0;
	margin: 0
}

a {
	text-decoration: none
}

ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.swiper-pagination-bullet {
	margin: 0 .5rem !important;
	width: 1rem !important;
	height: 1rem !important;
	transition-duration: .3s
}

.swiper-pagination-bullet-active {
	background: #fff !important;
	scale: 1.5
}

.swiper-wrapper {
	padding: 4rem 0
}

.swiper-slide {
	transition-property: all;
	transition-duration: .3s
}

.swiper-slide-active .tradingCard {
	transform: scale(1.1)
}


/*.sticky_header {
	position: fixed;
	top: 0px;
	z-index: 1071;
	width: 100%;background:none;
}

.header_fixer {
	background: linear-gradient(180deg, rgba(29, 51, 103, 1) 0%, rgba(20, 34, 67, 1) 100%);
	background: rgb(29, 51, 103);padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	
}*/




.menu {
	margin: 28px 0 0 0;
}

.dropdown-menu li {
	position: relative
}

.dropdown-menu .submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px
}

.dropdown-menu .submenu-left {
	right: 100%;
	left: auto
}

.dropdown-menu>li:hover {
	background-color: #f1f1f1
}

.navbar {
	font-size: 1.05em;
}

.nav-link {
	color: #fff;
	margin-right: 0;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	font-size: 1.25rem;
	line-height: 0.75rem;
	border-radius: 5px;
	font-family: "Almarai", sans-serif;
	font-weight: normal;
	font-style: normal;
}

.navbar-expand-lg .navbar-nav li {
	margin: 0 8px;
}

.nav-link:hover,
.nav-link:focus {
	color: #15d8c7;
	background: #fff;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
	color: #15d8c7;
}

.dropdown-item {
	padding: 0.73rem 0.75rem;
    background: #fff;
    margin: 0 0 8px 0;
    text-align: center;
    border-radius: 0.375rem;font-size: 12px; text-transform:uppercase;
	
}
.navbar-toggler {
	background-color:transparent;
	padding: 0
}


.dropdown-menu li {
	margin: 0 8px;border-radius: 0.375rem;
	box-shadow:0px 0px 8px #c7c3c3;
}

.top2_fixer .nav-link {
	font-size: 1rem;
	line-height: 1.5rem;
}

.top2_fixer .en_lanuage {
	font-size: 0.75rem;
	line-height: 1.5rem;
	margin: 4px 8px 0 8px !important;
}
.dropdown-menu{background:none;border: 0;}

.en_lanuage {
	border: 2px solid #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	line-height: 28px;
	text-align: center;
	padding: 0;
	color: #fff;
	margin-left: 18px !important;
}

.en_lanuage.first-child {
	margin-left: 13px !important;
}

.en_lanuage.act {
	background: #fff;
	color: #000;
}


.almarai {
	font-family: "Almarai", sans-serif;
}

.verticals_section {
	margin: -50px 0 0 0;
}

.etOgWV {
	position: relative;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	flex-direction: row;
	padding: 5rem 10rem;
}

.gkBvQy {
	position: relative;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	flex-direction: column;
	padding: 5rem 10rem 6rem;
}

.CSsxN {
	position: relative;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	flex-direction: column;
	padding: 5rem;
}

.afdLF {
	position: relative;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	flex-direction: column;
	padding: 5rem 10rem;
}

.jpXrvd {
    position: relative;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex-direction: column;
    padding: 5rem 10rem;
}


.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}

.vision_transform{transform:translateX(168px) translateY(78px);}
.mission_transform{transform:translateX(-8px) translateY(-3px)}

.bg-green-btn{padding: 8px 20px;}
.banner_text{letter-spacing:-2px;}
.facility_desc{letter-spacing:-0.5px;}
.bg-blue2{background:#2bb3a6;}
.opacity-30{opacity:.3;}


@media screen and (max-width:991px) {
	html {
		font-size: 13.5px
	}
	
	
.menu{ margin:9px 5px 0 0;}
.offcanvas{background:#13204b; background: rgba(19,32,75,0.2);}
.dropdown-menu .dropdown-menu{margin-left:0.7rem;margin-right:0.7rem;margin-bottom:.5rem}
.dropdown-menu .submenu{display:block;position:inherit;left:inherit; top:inherit;background-color:#fff !important;border-radius:5px}
.dropdown-item{padding:4px 10px}
.top_cate_area{border:0;padding:0 0 5px 0}
.navbar-toggler{margin:4px 0 0 0;padding:0}
.dropdown-menu .submenu .dropdown-item{font-size:.9em;padding:0 10px}.dropdown-item{font-size:0.9em}
.navbar-nav .dropdown-menu{background:#e2f9f9}
.nav-link{font-size:1.3em;padding:10px 10px !important;color:#fff}
.navbar-nav>li{border-bottom:0px solid #29408d}
.navbar-nav>li .dropdown-toggle::after{float:right;margin-top:7px}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{color:#15d8c7; text-align:center;}
.offcanvas-title{ color:#fff}
.navbar-toggler-icon{ width:1.8em; height:1.8em;}
.en_lanuage {margin:5px 0 0 13px !important;}

.top2_fixer .nav-link {
    font-size: 1.3em;
    line-height: 0.75rem;
}
.top2_fixer .en_lanuage {
    margin: 5px 8px 0 13px !important;line-height: 30px;
}

}

@media screen and (max-width:768px) {
	html {
		font-size: 12.5px
	}
	.vision_transform{transform:translateX(0px) translateY(0px);}
.mission_transform{transform:translateX(0px) translateY(0px)}

}



@media screen and (max-width:576px) {
	html {
		font-size: 10.5px
	}
	.etOgWV {
    padding: 5rem 3rem;
}
	.fVTtQT {
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 5rem;
    padding-left: 2rem;
}
	.gkBvQy {
    padding: 5rem 3rem 6rem;
}
.afdLF {
    padding: 5rem 3rem;
}
.jpXrvd {
    padding: 5rem 3rem;
}
.basis30 {
    width: 100%;}
.basis70 {
    width: 100%;
}

.basis53{width: 100%;}
.basis47{width: 100%;}
.offcanvas{max-width:66%;}

#about .flex {
    display: block;
}
}

.before\:z-20:before {
	content: var(--tw-content);
	z-index: 20
}

.before\:z-40:before {
	content: var(--tw-content);
	z-index: 40
}

.before\:rounded-2xl:before {
	content: var(--tw-content);
	border-radius: 1rem
}

.before\:bg-blue:before {
	content: var(--tw-content);
	--tw-bg-opacity: 1;
	background-color: rgb(33 56 110/var(--tw-bg-opacity))
}

.before\:bg-green:before {
	content: var(--tw-content);
	--tw-bg-opacity: 1;
	background-color: rgb(43 179 166/var(--tw-bg-opacity))
}

.before\:opacity-30:before {
	content: var(--tw-content);
	opacity: .3
}

.before\:opacity-20:before {
	content: var(--tw-content);
	opacity: .2
}

.before\:opacity-40:before {
	content: var(--tw-content);
	opacity: .4
}

.before\:absCover:before {
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	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));
	background-size: cover;
	background-position: 50%
}

.after\:absolute:after,
.before\:absCover:before {
	content: var(--tw-content);
	position: absolute
}

.after\:bottom-0:after {
	content: var(--tw-content);
	bottom: 0
}

.after\:left-0:after {
	content: var(--tw-content);
	left: 0
}

.after\:top-0:after {
	content: var(--tw-content);
	top: 0
}

.after\:left-14:after {
	content: var(--tw-content);
	left: 3.5rem
}

.after\:top-1\/2:after {
	content: var(--tw-content);
	top: 50%
}

.after\:left-1\/2:after {
	content: var(--tw-content);
	left: 50%
}

.after\:-z-20:after {
	content: var(--tw-content);
	z-index: -20
}

.after\:-z-10:after {
	content: var(--tw-content);
	z-index: -10
}

.after\:-z-50:after {
	content: var(--tw-content);
	z-index: -50
}

.after\:z-10:after {
	content: var(--tw-content);
	z-index: 10
}

.after\:h-full:after {
	content: var(--tw-content);
	height: 100%
}

.after\:h-10:after {
	content: var(--tw-content);
	height: 2.5rem
}

.after\:h-\[110\%\]:after {
	content: var(--tw-content);
	height: 110%
}

.after\:w-full:after {
	content: var(--tw-content);
	width: 100%
}

.after\:w-0:after {
	content: var(--tw-content);
	width: 0
}

.after\:w-44:after {
	content: var(--tw-content);
	width: 11rem
}

.after\:w-\[95\%\]:after {
	content: var(--tw-content);
	width: 95%
}

.after\:-translate-y-3:after {
	--tw-translate-y: -0.75rem
}

.after\:-translate-x-1\/2:after,
.after\:-translate-y-3:after {
	content: var(--tw-content);
	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))
}

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

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

.after\:-translate-y-1\/2:after,
.after\:scale-125:after {
	content: var(--tw-content);
	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))
}

.after\:scale-125:after {
	--tw-scale-x: 1.25;
	--tw-scale-y: 1.25
}

.after\:rounded-md:after {
	content: var(--tw-content);
	border-radius: .375rem
}

.after\:rounded-xl:after {
	content: var(--tw-content);
	border-radius: .75rem
}

.after\:rounded-2xl:after {
	content: var(--tw-content);
	border-radius: 1rem
}

.after\:border-4:after {
	content: var(--tw-content);
	border-width: 4px
}

.after\:border-green:after {
	content: var(--tw-content);
	--tw-border-opacity: 1;
	border-color: rgb(43 179 166/var(--tw-border-opacity))
}

.after\:bg-green:after {
	content: var(--tw-content);
	--tw-bg-opacity: 1;
	background-color: rgb(43 179 166/var(--tw-bg-opacity))
}

.after\:bg-blue:after {
	content: var(--tw-content);
	--tw-bg-opacity: 1;
	background-color: rgb(33 56 110/var(--tw-bg-opacity))
}

.after\:bg-white:after {
	content: var(--tw-content);
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.after\:bg-gradient-to-br:after {
	content: var(--tw-content);
	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.after\:from-\[\#21386E\]:after {
	content: var(--tw-content);
	--tw-gradient-from: #21386e;
	--tw-gradient-to: rgba(33, 56, 110, 0);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.after\:via-\[\#1c3265\]:after {
	content: var(--tw-content);
	--tw-gradient-to: rgba(28, 50, 101, 0);
	--tw-gradient-stops: var(--tw-gradient-from), #1c3265, var(--tw-gradient-to)
}

.after\:to-\[\#111d3a\]:after {
	content: var(--tw-content);
	--tw-gradient-to: #111d3a
}

.after\:opacity-30:after {
	content: var(--tw-content);
	opacity: .3
}

.after\:opacity-100:after {
	content: var(--tw-content);
	opacity: 1
}

.after\:opacity-0:after {
	content: var(--tw-content);
	opacity: 0
}

.after\:opacity-10:after {
	content: var(--tw-content);
	opacity: .1
}

.after\:opacity-20:after {
	content: var(--tw-content);
	opacity: .2
}

.after\:duration-300:after {
	content: var(--tw-content);
	transition-duration: .3s
}

.after\:duration-200:after {
	content: var(--tw-content);
	transition-duration: .2s
}

.after\:gradient-mask-l-30:after {
	content: var(--tw-content);
	-webkit-mask-image: linear-gradient(270deg, #000 30%, transparent);
	mask-image: linear-gradient(270deg, #000 30%, transparent)
}

.after\:absCover:after {
	content: var(--tw-content);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	background-size: cover;
	background-position: 50%;
	display: none;
}

.after\:absCover:after,
.hover\:-translate-y-5:hover {
	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))
}

.hover\:-translate-y-5:hover {
	--tw-translate-y: -1.25rem
}

.hover\:bg-blue:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(33 56 110/var(--tw-bg-opacity)) !important;
}

.hover\:text-green:hover {
	--tw-text-opacity: 1;
	color: rgb(43 179 166/var(--tw-text-opacity))
}

.hover\:after\:w-full:hover:after {
	content: var(--tw-content);
	width: 100%
}

.hover\:after\:opacity-100:hover:after {
	content: var(--tw-content);
	opacity: 1
}

.group:hover .group-hover\:mb-4 {
	margin-bottom: 1rem
}

.group:hover .group-hover\:translate-y-0 {
	--tw-translate-y: 0px;
	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))
}

.group:hover .group-hover\:bg-green {
	--tw-bg-opacity: 1;
	background-color: rgb(43 179 166/var(--tw-bg-opacity)) !important;
}

.group:hover .group-hover\:bg-opacity-50 {
	opacity: 0.5
}

.group:hover .group-hover\:text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity))
}

.group:hover .group-hover\:opacity-100 {
	opacity: 1  !important;
}

.group:hover .group-hover\:brightness-\[10\] {
	--tw-brightness: brightness(10)
}

.group:hover .group-hover\:brightness-\[10\],
.group:hover .group-hover\:grayscale {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.group:hover .group-hover\:grayscale {
	--tw-grayscale: grayscale(100%)
}

@media (max-width:992px) {
	.desc\:gap-8 {
		gap: 2rem
	}
}

@media (max-width:768px) {
	.tab\:fixed {
		position: fixed
	}

	.tab\:top-0 {
		top: 0
	}

	.tab\:right-0 {
		right: 0
	}

	.tab\:mb-10 {
		margin-bottom: 2.5rem
	}

	.tab\:block {
		display: block
	}

	.tab\:hidden {
		display: none
	}

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

	.tab\:h-80 {
		height: 20rem
	}

	.tab\:min-h-\[15rem\] {
		min-height: 15rem
	}

	.tab\:w-fit {
		width: -moz-fit-content;
		width: fit-content
	}

	.tab\:w-\[30ch\] {
		width: 30ch
	}

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

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

	.tab\:basis-full {
		flex-basis: 100%
	}

	.tab\:translate-x-0 {
		--tw-translate-x: 0px
	}

	.tab\:translate-x-0,
	.tab\:translate-x-full {
		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))
	}

	.tab\:translate-x-full {
		--tw-translate-x: 100%
	}

	.tab\:-translate-x-2\/3 {
		--tw-translate-x: -66.666667%
	}

	.tab\:-translate-x-2\/3,
	.tab\:translate-x-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))
	}

	.tab\:translate-x-2 {
		--tw-translate-x: 0.5rem
	}

	.tab\:translate-x-24 {
		--tw-translate-x: 6rem
	}

	.tab\:translate-x-24,
	.tab\:translate-y-16 {
		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))
	}

	.tab\:translate-y-16 {
		--tw-translate-y: 4rem
	}

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

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

	.tab\:flex-col {
		flex-direction: column
	}

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

	.tab\:gap-y-20 {
		row-gap: 5rem
	}

	.tab\:px-16 {
		padding-left: 4rem;
		padding-right: 4rem
	}

	.tab\:text-justify {
		text-align: justify
	}

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

	.tab\:text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem
	}

	.tab\:flexCenter {
		display: flex;
		align-items: center;
		justify-content: center
	}

	.tab\:after\:opacity-80:after {
		content: var(--tw-content);
		opacity: .8
	}
}

@media (max-width:576px) {
	.mob\:absolute {
		position: absolute
	}

	.mob\:left-0 {
		left: 0
	}

	.mob\:bottom-auto {
		bottom: auto
	}

	.mob\:top-1\/2 {
		top: 50%
	}

	.mob\:left-2 {
		left: .5rem
	}

	.mob\:top-0 {
		top: 0
	}

	.mob\:order-1 {
		order: 1
	}

	.mob\:mx-auto {
		margin-left: auto;
		margin-right: auto
	}

	.mob\:mb-6 {
		margin-bottom: 1.5rem
	}

	.mob\:mb-16 {
		margin-bottom: 4rem
	}

	.mob\:h-auto {
		height: auto
	}

	.mob\:h-\[60vh\] {
		height: 60vh
	}

	.mob\:h-96 {
		height: 24rem
	}

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

	.mob\:min-h-\[20rem\] {
		min-height: 20rem
	}

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

	.mob\:w-40 {
		width: 10rem
	}

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

	.mob\:w-12 {
		width: 3rem
	}

	.mob\:w-8\/10 {
		width: 80%
	}

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

	.mob\:basis-full {
		flex-basis: 100%
	}

	.mob\:-translate-y-3\/4 {
		--tw-translate-y: -75%
	}

	.mob\:-translate-y-3\/4,
	.mob\:translate-x-5 {
		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))
	}

	.mob\:translate-x-5 {
		--tw-translate-x: 1.25rem
	}

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

	.mob\:-translate-y-1\/2,
	.mob\: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))
	}

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

	.mob\:-translate-y-10 {
		--tw-translate-y: -2.5rem
	}

	.mob\:-translate-x-14,
	.mob\:-translate-y-10 {
		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))
	}

	.mob\:-translate-x-14 {
		--tw-translate-x: -3.5rem
	}

	.mob\:-translate-y-20 {
		--tw-translate-y: -5rem
	}

	.mob\:-translate-y-20,
	.mob\:translate-y-24 {
		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))
	}

	.mob\:translate-y-24 {
		--tw-translate-y: 6rem
	}

	.mob\:-translate-x-2 {
		--tw-translate-x: -0.5rem
	}

	.mob\:-translate-x-2,
	.mob\:translate-x-4 {
		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))
	}

	.mob\:translate-x-4 {
		--tw-translate-x: 1rem
	}

	.mob\:translate-x-8 {
		--tw-translate-x: 2rem
	}

	.mob\:scale-75,
	.mob\:translate-x-8 {
		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))
	}

	.mob\:scale-75 {
		--tw-scale-x: .75;
		--tw-scale-y: .75
	}

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

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

	.mob\:flex-col {
		flex-direction: column
	}

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

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

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

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

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

	.mob\:gap-y-10 {
		row-gap: 2.5rem
	}

	.mob\:rounded-2xl {
		border-radius: 1rem
	}

	.mob\:rounded-b-none {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0
	}

	.mob\:rounded-b-2xl {
		border-bottom-right-radius: 1rem;
		border-bottom-left-radius: 1rem
	}

	.mob\:rounded-t-none {
		border-top-left-radius: 0;
		border-top-right-radius: 0
	}

	.mob\:p-6 {
		padding: 1.5rem
	}

	.mob\:p-4 {
		padding: 1rem
	}

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

	.mob\:px-16 {
		padding-left: 4rem;
		padding-right: 4rem
	}

	.mob\:px-12 {
		padding-left: 3rem;
		padding-right: 3rem
	}

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

	.mob\:py-4 {
		padding-top: 1rem;
		padding-bottom: 1rem
	}

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

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

	.mob\:pt-6 {
		padding-top: 1.5rem
	}

	.mob\:pl-24 {
		padding-left: 6rem
	}

	.mob\:pl-10 {
		padding-left: 2.5rem
	}

	.mob\:text-center {
		text-align: center
	}

	.mob\:text-justify {
		text-align: justify
	}

	.mob\:text-start {
		text-align: start
	}

	.mob\:text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem
	}

	.mob\:text-sm {
		font-size: .875rem;
		line-height: 1.25rem
	}

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

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

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

	.mob\:absCover {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		width: 100%;
		--tw-translate-x: -50%;
		--tw-translate-y: -50%;
		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));
		background-size: cover;
		background-position: 50%
	}

	.mob\:after\:hidden:after {
		content: var(--tw-content);
		display: none
	}

	.mob\:hover\:translate-y-0:hover {
		--tw-translate-y: 0px;
		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))
	}
}

@font-face {
	font-family: Almarai;
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url(../fonts/almarai-arabic-400-normal.61c66435.woff2) format("woff2"), url(../fonts/almarai-arabic-400-normal.4bdb6fd3.woff) format("woff");
	unicode-range: U+06??, U+0750-077f, U+0870-088e, U+0890-0891, U+0898-08e1, U+08e3-08ff, U+200c-200e, U+2010-2011, U+204f, U+2e41, U+fb50-fdff, U+fe70-fe74, U+fe76-fefc, U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}



/*animation*/
.animated{animation-duration:1s;-webkit-animation-duration:1s; -webkit-animation-fill-mode: both;
  animation-fill-mode: both; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;
}

.animated2{animation-duration:4s;-webkit-animation-duration:4s; -webkit-animation-fill-mode: both;
  animation-fill-mode: both; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;
}

.animated3{animation-duration:5s;-webkit-animation-duration:5s; -webkit-animation-fill-mode: both;
  animation-fill-mode: both; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;
}

.animated4{animation-duration:6s;-webkit-animation-duration:6s; -webkit-animation-fill-mode: both;
  animation-fill-mode: both; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;
}



@keyframes fade_eff{
0%{opacity:0; transform:translateY(-20px);-webkit-transform:translateY(-20px);}
100%{opacity:1; transform:translateY(0);-webkit-transform:translateY(0);}
}

@-webkit-keyframes fade_eff{
0%{opacity:0; transform:translateY(-20px);-webkit-transform:translateY(-20px);}
100%{opacity:1; transform:translateY(0);-webkit-transform:translateY(0);}
}
.fade_eff{animation-name:fade_eff;-webkit-animation-name:fade_eff;}



@keyframes scale_eff{
0%{opacity:0; transform:scale(0);-webkit-transform:scale(0);}
100%{opacity:1; transform:scale(1);-webkit-transform:scale(1);}
}

@-webkit-keyframes scale_eff{
0%{opacity:0; transform:scale(0);-webkit-transform:scale(0);}
100%{opacity:1; transform:scale(1);-webkit-transform:scale(1);}
}
.scale_eff{animation-name:scale_eff;-webkit-animation-name:scale_eff;}




@keyframes drop_eff{
0%{opacity:0;transform:translateY(200px);-webkit-transform:translateY(200px);}
80%{transform:translateY(-20px);-webkit-transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);}
}

@-webkit-keyframes drop_eff{
0%{opacity:0;transform:translateY(200px);-webkit-transform:translateY(200px);}
80%{transform:translateY(-20px);-webkit-transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);}
}
.drop_eff{animation-name:drop_eff;-webkit-animation-name:drop_eff;-moz-animation-name:drop_eff;-o-animation-name:drop_eff;}


@keyframes drop_eff2{
0%{opacity:0;transform:translateY(100px);-webkit-transform:translateY(100px);}
100%{transform:translateY(0px);-webkit-transform:translateY(0px);}
}

@-webkit-keyframes drop_eff2{
0%{opacity:0;transform:translateY(100px);-webkit-transform:translateY(100px);}
100%{transform:translateY(0px);-webkit-transform:translateY(0px);}
}
.drop_eff2{animation-name:drop_eff2;-webkit-animation-name:drop_eff2;}

@keyframes drop_eff3{
0%{opacity:0;transform:translateY(-100px);-webkit-transform:translateY(-100px);}
100%{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);}
}

@-webkit-keyframes drop_eff3{
0%{opacity:0;transform:translateY(-100px);-webkit-transform:translateY(-100px);}
100%{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);}
}

.drop_eff3{animation-name:drop_eff3;-webkit-animation-name:drop_eff3;-moz-animation-name:drop_eff3;-o-animation-name:drop_eff3;}


@keyframes drop_eff4{
0%{opacity:0;transform:translateX(-50px);-webkit-transform:translateX(-50px);}
100%{transform:translateX(0px);-webkit-transform:translateX(0px);}
}

@-webkit-keyframes drop_eff4{
0%{opacity:0;transform:translateX(-50px);-webkit-transform:translateX(-50px);}
100%{transform:translateX(0px);-webkit-transform:translateX(0px);}
}
.drop_eff4{animation-name:drop_eff4;-webkit-animation-name:drop_eff4;}


@keyframes drop_eff5{
0%{opacity:0;transform:translateX(100px);-webkit-transform:translateX(100px);}
100%{transform:translateX(0px);-webkit-transform:translateX(0px);}
}

@-webkit-keyframes drop_eff5{
0%{opacity:0;transform:translateX(100px);-webkit-transform:translateX(100px);}
100%{transform:translateX(0px);-webkit-transform:translateX(0px);}
}
.drop_eff5{animation-name:drop_eff5;-webkit-animation-name:drop_eff5;}










@-webkit-keyframes shake_eff {
0%, 100%{-webkit-transform:translateX(0); transform:translateX(0);}
10%, 30%, 50%, 70%, 90%{-webkit-transform: translateX(-3px);transform: translateX(-3px);}
20%, 40%, 60%, 80%{-webkit-transform: translateX(3px);transform: translateX(3px);}
}

@keyframes shake_eff {
0%, 100% {-webkit-transform: translateX(0);transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-3px);transform:translateX(-3px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(3px);transform:translateX(3px);}
}
.shake_eff{-webkit-animation-name: shake_eff;animation-name: shake_eff;}