/*
  Main CSS File
  Abdulrhman Abouelsaad
*/
@font-face {
    font-family: TSTarek;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/TSTarek-Medium.woff2") format("woff2");
    font-named-instance: Regular;
}

@font-face {
    font-family: TSTarek;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/TSTarek-Bold.woff2") format("woff2");
    font-named-instance: Italic;
}

@font-face {
    font-family: TSTarek;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/TSTarek-ExtraBold.woff2") format("woff2");
    font-named-instance: Italic;
}

@font-face {
    font-family: HAFS-Regular;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/uthmanic-HAFS-Regular.woff2") format("woff2");
    font-named-instance: Italic;
}

@font-face {
    font-family: Khadash-Arabic;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Khadash-Arabic.woff2") format("woff2");
    font-named-instance: Italic;
}

@font-face {
  font-family: 'UAESymbol';
  src: url('../fonts/aed-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* better for icon fonts */
}

*,
::before,
::after {
    box-sizing: border-box; /* 1 */
    border-width: 0; /* 2 */
    border-style: solid; /* 2 */
    border-color: #e5e7eb; /* 2 */
}

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

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
.container {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

html,
:host {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -moz-tab-size: 4; /* 3 */
    -o-tab-size: 4;
    tab-size: 4; /* 3 */
    font-family: TSTarek, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
    font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* 5 */
    font-variation-settings: normal; /* 6 */
    -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    cursor: default;
    margin: 0; /* 1 */
    line-height: inherit; /* 2 */
    font-weight: 300;
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
    font-feature-settings: normal; /* 2 */
    font-variation-settings: normal; /* 3 */
    font-size: 1em; /* 4 */
}


/*
    UAE Symbol
*/
.dirham-symbol {
    font-family: 'UAESymbol', sans-serif;
    font-size: inherit;
    color: inherit;
    font-weight: bold;
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    font-size: 100%; /* 1 */
    font-weight: inherit; /* 1 */
    line-height: inherit; /* 1 */
    color: inherit; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

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

.button:hover, .submitButton:hover, a.back_login:hover, a.new_registration:hover, a.cancel:hover, #replacePoints:hover,
.btn_nml_s:hover, .btn_without_bg:hover, #payWithPoints:hover, #payByPoints:hover, .don_nowsli:hover, .submit_sva button:hover, #openBankModalBtn:hover, #processPayment:hover, #payWithPoints:hover, #paymentUpdatePanel div:hover {
  box-shadow: 0 6px 8px rgb(49 51 52 / 14%);
  transform: translateY(-0.8px);
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

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

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

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

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
    cursor: default;
}

.hide {
    display: none !important;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
    display: none;
}

[type="text"], input:where(:not([type])), [type="phone"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
}

[type="text"]:focus, input:where(:not([type])):focus, [type="phone"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, [multiple]:focus, textarea:focus, select:focus {
    outline: 1px solid transparent;
    outline-offset: 1px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #1679c2;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #1679c2;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
}

::-webkit-datetime-edit {
    display: inline-flex;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

[multiple],
[size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    -webkit-print-color-adjust: unset;
    print-color-adjust: unset;
}

[type="checkbox"],
[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}

[type="checkbox"] {
    border-radius: 3px;
}

[type="radio"] {
    border-radius: 100%;
}

[type="checkbox"]:focus,
[type="radio"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type="checkbox"]:checked,
[type="radio"]:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {
    [type="checkbox"]:checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active) {
    [type="radio"]:checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

[type="checkbox"]:checked:hover,
[type="checkbox"]:checked:focus,
[type="radio"]:checked:hover,
[type="radio"]:checked:focus {
    border-color: transparent;
    background-color: currentColor;
}

[type="checkbox"]:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (forced-colors: active) {
    [type="checkbox"]:indeterminate {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
    }
}

[type="checkbox"]:indeterminate:hover,
[type="checkbox"]:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
}

[type="file"] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
}

[type="file"]:focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/*
  Edit from here
*/

/*
  Mobile Menu
*/
body.active {
    overflow: hidden;
}

.menu-container {
    position: relative;
}

.menu {
    list-style: none;
    padding: 0;
}

.menu li a {
    display: block;
    text-decoration: none;
    color: #333;
}

.submenu {
    display: none;
    width: 100%;
}

.back-btn {
    display: none;
}

.menu-container {
    width: 100%;
    max-width: 85%;
    background: #fff;
    padding: 2rem;
    height: 100%;
    position: fixed;
    right: 0;
    top: 62px;
    bottom: 0;
    z-index: 99999999;
    opacity: 0;
visibility: hidden;
    pointer-events: none;
    transform: translate3d(-20px, 0, 0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.user_ava {
    width: 42px;
    height: 42px;
    background: #dfdfdf;
    padding: 10px;
    border-radius: 50%;
}

.user_ava img {
    width: 100%;
    height: auto;
}

.sd_cusr {
    gap: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 17px;
}

#login-link {
    margin-bottom: 25px;
}

#UpdatePanel1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
}

.login_sign_social_logos {
    width: 32px;
    height: 32px;
}

#UpdatePanel1 button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    direction: ltr;
    gap: 14px;
    background: #FFF !important;
    color: #000;
    border: 1px solid #0078C5 !important;
    border-radius: 5px;
    padding: 6px 0 !important;
}

ul#main-menu li a {
    font-size: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
}

.menu li {
    width: 100%;
}

.slod_it {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arr_ow svg {
    width: 13px;
    height: 13px;
    opacity: 0.5;
}

ul.submenu li a img {
    width: 36px;
    height: auto;
}

ul#main-menu ul.submenu li a {
    display: flex;
    align-items: center;
    gap: 12px;
}

li.has-submenu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-section.submenu-open {
    display: none;
}

.toggle-section {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toggle-item {
    width: 100%;
}

.toggle-item span {
    width: 100%;
    display: block;
    font-size: 17px;
}

ul.options {
    display: none;
    padding-top: 5px;
}

ul.options li {
    width: 100%;
    display: block;
}

ul.options li a {
    display: block;
    width: 100%;
    padding: 8px 0;
}

ul.options li a:hover {
    color: #0078c5;
}

.toggle-item.active svg {
    transform: rotate3d(0, 0, 1, 0deg);
}

.toggle-item > span {
    padding: 12px 0;
}

.aasdie__de {
    display: flex;
    gap: 8px;
    align-items: center;
}

.asdji_cur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

.asdji_cur svg {
    opacity: 0.5;
    width: 13px;
    height: 13px;
    transition: 0.25s ease all;
    transform: rotate3d(0, 0, 1, -180deg);
}

.aasdie__de svg {
    width: 13px;
    height: 13px;
}

.aasdie__de span {
    line-height: 16px;
    display: block;
}

button#back-btn {
    padding: 15px 0;
    width: 100%;
}

.menu-container.etlaa_bara {
    opacity: 1;
visibility: visible;
    pointer-events: auto;
    transform: translate3d(0px, 0, 0);
}




/*
  Header
*/
header {
    border: 1px solid;
    border-color: #808080;
    background: #f8f8f8;
    z-index: 999999;
    position: relative;
    right: 0;
    left: 0;
}

a.fr.aqm img {
    width: 100%;
    height: 100%;
}

a.fr.aqm {
    display: block;
    width: 100%;
    max-width: 110px;
    height: 50px;
}

.right_cont {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu_se {
    display: flex;
    align-items: center;
}

.menu_se a {
    display: flex;
    align-items: center;
    padding: 30px 17px;
    font-weight: 600;
}

a.sin_men svg {
    width: 13px;
    height: 13px;
}

.left_sid_cont {
    display: flex;
    align-items: center;
    gap: 30px;
}

nav.gha_he {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lang_cu {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang_curre_cart {
    display: flex;
    align-items: center;
    gap: 20px;
}

.login_search {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ca_icn {
    width: 23px;
    height: 23px;
}

.ca_icn svg {
    width: 100%;
    height: 100%;
}

.jhd_gh {
    height: 50px;
    position: relative;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jhd_gh span {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #ec763f;
    width: auto;
    height: 20px;
    min-width: 20px;
    padding: 1px 6px;
    text-align: center;
    border-radius: 12px;
    font-size: 14px;
}

a.se_ch {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

a.log_sjhe {
    display: block;
    padding: 13px 10px;
}

.div_i {
    width: 1px;
    height: 16px;
    background: #000;
}

.dropdown-content.with_icons {
    display: flex;
    gap: 5px;
    top: 85px;
    align-items: center;
}

.with_icons a img.hvr_img {
    display: none;
}

.dropdown-content.with_icons a {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    padding: 20px 30px;
    white-space: nowrap;
    min-width: 160px;
}

.with_icons a img {
    width: 50px;
    height: 50px;
}

.with_icons a:hover img.def_img {
    display: none;
}

.with_icons a:hover img.hvr_img {
    display: block;
}

.with_icons span.small_sub {
    font-size: 16px;
    font-weight: 100;
    margin: 0;
}

.with_icons a span {
    margin-top: 10px;
}

/**/
a.dropbtn {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dropdown {
    position: relative;
    display: inline-block;
}

a.dropbtn.active svg {
    transform: rotate3d(0, 0, 1, -180deg);
}

a,
a.dropbtn svg {
    transition: 0.25s ease all;
}

.dropdown-content {
    position: absolute;
    top: 54px;
    right: 0;
    padding: 10px 0;
    background-color: #f8f8f8;
    min-width: 190px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    transition: 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 15px, 0);
    opacity: 0;
    visibility: hidden;
}

.dropdown-content.active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
}

.dropdown-content a {
    color: black;
    padding: 12px 14px;
    text-decoration: none;
    display: block;
    font-size: 15px;
}

.dropdown-content a:hover {
    background-color: #fff;
}

/*
    Mobile
*/
.mob_menu_sh {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gha_logo_mob {
    width: 90px;
    height: 42px;
}

.gha_logo_mob img {
    width: 100%;
    height: auto;
}

.mobile_nav .cart_s {
    width: 40px;
    height: 40px;
}

.mobile_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: none;
}

/*
  Main Slider
*/
.splide__list {
    direction: ltr;
}

.splide__slide img {
    display: block;
    width: 100%;
    /* transition: transform 400ms; */
    /* transform: scale(.9); */
    /* transform-origin: center center; */
}

.splide__slide.is-active img {
    /* transform: scale(1); */
}

.splide__slide img {
    height: 100%;
    left: -9999px;
    max-width: none;
    right: -9999px;
    margin: auto;
    position: absolute;
    object-fit: cover;
}

img.mobile_size {
    display: none;
}

.splide__slide {
    height: 650px;
    overflow: hidden;
    position: relative;
}

.splide__track--fade > .splide__list > .splide__slide.is-active img {
    animation: zoom-in-zoom-out 3s ease-out;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

button.splide__pagination__page {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    transition: all 400ms ease-out;
    margin: 0px 3px;
    background: #fff;
    width: 180px;
    border-radius: 0;
    height: 8px;
}

.splide__pagination__page.is-active {
    transform: scale(1);
    width: 180px;
    opacity: 1;
    background: rgb(255 255 255 / 62%);
}

.splide__pagination {
    bottom: 40px;
}

.splide__pagination li {
    display: flex;
}

button.splide__pagination__page.is-active:before {
    content: " ";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 8px;
    width: 0%;
    animation: progress-forward 10s;
    background: #ffffff;
    z-index: 9;
}

@keyframes progress-forward {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}



/*
    Slider Content
*/
.skje__pe_conbef {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.slider_content_slop {
    position: absolute;
    top: 45%;
    margin-top: -140px;
    left: 0;
    right: 0;
    z-index: 999;
}

.askjei_sserf {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 650px;
    justify-content: center;
}

.cut_skjefnt {
    font-size: 160px;
    color: #FFF;
    font-family: 'Khadash-Arabic';
    margin: 0;
    width: 100%;
    padding-left: 0;
    line-height: 100px;
    /* margin-bottom: -8px; */
}

.cut_skjefnt, #villageNameSlider {
    /* margin-top: -40px; */
    margin-left: 0;
}

.ske_ooelr {
    display: flex;
    position: relative;
    height: 110px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.skj_subcont {
    color: #fff;
}

.ske_ooelr h3 {
    font-size: 85px;
    color: #fff;
}

.skj_subcont {
    font-size: 23px;
}

.sllae_pse_dgh span {
    display: block;
    width: -webkit-fill-available;
    height: 2px;
    background: #0078c5;
}

.sllae_pse_dgh {
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
}

.sllae_pse_dgh strong {
    font-weight: 600;
    white-space: pre;
}

a.don_nowsli {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 80px;
    gap: 10px;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}




/*
  Ayah Section
*/
.ayah_content {
    font-family: HAFS-Regular, Arial;
}


/*
    Sections
*/
section.cat_lincont {
    padding-top: 40px;
}

.l-container {
     display: flex;
     width: 100%;
     max-width: 100%;
     padding: 50px 0 80px 0;
     justify-content: center;
     gap: 15px;
}

.b-card {
    width: 100%;
    max-width: 340px;
}

.b-game-card__cover {
    min-height: 275px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

a.block_s_link {
    border-radius: 10px;
    overflow: hidden;
    display: block;
    transform: scale(1);
}

a.block_s_link:hover {
    transform: scale(0.97);
}

a.block_s_link h3 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 23px;
    color: #fff;
    font-weight: 400;
}

@media(max-width: 1550px) {
    .l-container {
        grid-gap: 25px;
    }
    
    a.block_s_link h3 {
        font-size: 22px;
    }
}

@media(max-width: 1300px) {
    .b-game-card__cover {
        min-height: 300px;
    }
    
    .l-container {
        grid-gap: 20px;
        padding: 60px 0 35px 0;
    }
    
    a.block_s_link h3 {
        font-size: 20px;
    }
}

@media(max-width: 1200px) {
    .l-container {
        grid-gap: 15px;
    }
    
    .b-game-card__cover {
        /* min-height: 300px; */
    }
    
    a.block_s_link h3 {
        font-weight: 100;
        font-size: 21px;
    }

    a.block_s_link h3 {
        font-weight: 300;
    }
    
    .l-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        justify-items: center;
        margin: auto;
    }
}

@media(max-width: 1000px) {
    .l-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .b-game-card__cover {
        min-height: 300px;
    }
}

@media(max-width: 850px) {
    .l-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        justify-items: center;
        max-width: 560px;
        margin: auto;
    }
    
    .b-card {
        max-width: 100%;
    }
}

@media(max-width: 600px) {
    .b-game-card__cover {
        min-height: 240px;
    }
    
    .l-container {
        gap: 15px;
    }
}

@media(max-width: 520px) {
    a.block_s_link h3 {
        font-size: 20px;
    }
    
    .l-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding-bottom: 35px;
        padding-top: 0;
    }
}




/*
  Donation
*/
section.ayah {
    padding: 40px 0;
    text-align: center;
}

.cus_dkoe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 48px;
}

.sec_tit {
    display: inline-flex;
    padding-bottom: 40px;
    position: relative;
    min-width: 130px;
    flex-direction: column;
}

.sec_tit h2 {
    font-size: 35px;
}

.lkd_center {
    text-align: center;
    font-size: 19px;
}

span.sti_brd {
    position: relative;
    bottom: 0;
    right: 0;
    left: 0;
    /*background-image: url("data:image/svg+xml,%3Csvg width='228' height='22' viewBox='0 0 228 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M143.604 3.73C140.363 4.58 137.183 5.04 133.992 5.47C129.333 6.1 124.685 6.84 120.147 8.09C118.871 8.44 117.696 8.95 116.704 9.66C115.033 10.85 114.83 12.14 116.228 13.16C117.524 14.11 119.317 14.56 121.14 14.97C121.96 15.16 122.811 15.29 123.631 15.47C124.168 15.59 124.715 15.7 125.181 15.89C126.933 16.61 126.801 17.52 124.826 18.42C123.034 19.24 120.988 19.51 119.114 20.15C118.061 20.51 117.008 20.87 115.965 21.24C115.742 21.32 115.468 21.43 115.539 21.61C115.61 21.81 115.914 21.7 116.137 21.68C120.502 21.14 124.806 20.26 128.959 18.91C130.478 18.42 131.734 17.64 132.473 16.52C133 15.73 132.767 15.25 131.916 14.84C130.518 14.17 128.807 13.9 127.156 13.57C125.86 13.31 124.533 13.08 123.257 12.79C122.062 12.51 120.806 12.14 120.988 11.11C121.17 10.13 122.548 9.78 123.763 9.45C126.882 8.6 130.083 8.22 133.263 7.84C140.697 6.95 148.1 6.46 155.474 6.27C169.025 5.92 182.343 6.39 195.55 7.25C203.338 7.76 211.025 8.56 218.976 8.61C220.981 8.62 222.996 8.47 225.022 8.02C225.792 7.85 226.48 7.58 227.058 7.19C228.182 6.43 228.283 5.59 227.351 4.92C226.136 4.06 224.414 3.8 222.703 3.56C216.667 2.72 210.397 2.44 204.148 2.09C182.11 0.85 159.93 0 137.496 0C121.261 0 104.955 0.32 88.6393 0.71C67.5226 1.22 46.3451 2.07 25.2993 2.22C17.6932 2.27 10.1175 2.19 2.795 1.33C1.87335 1.22 0.809921 1.09 0.13135 1.91C-0.294023 2.43 0.354164 3.01 1.71131 3.27C6.04606 4.1 10.6239 4.38 15.2726 4.48C28.2769 4.76 41.4229 4.39 54.5487 4.09C70.3888 3.73 86.239 3.3 102.089 2.92C112.703 2.67 123.297 2.56 133.85 2.56C136.727 2.56 139.522 2.8 142.226 3.22C142.692 3.29 143.209 3.33 143.593 3.72' fill='black'/%3E%3C/svg%3E%0A");*/
    width: 100%;
    height: 40px;
    display: block;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
}

.proj_blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    width: 100%;
}

.sing_project {
    background: #f8f8f8;
    box-shadow: 0px 6px 12px -6px #18274b0f;
    width: 100%;
}

.sing_prj_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 23px;
}

.prj_nme h3 {
    font-size: 22px;
}

section.prominent_projects {
    padding: 10px 0 50px 0;
}

.pg_descrip {
    margin-bottom: 70px;
    font-size: 18px;
}

a.sh_thi {
    display: flex;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.oi {
    position: relative;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    background: #fff;
    padding: 0 12px 0 5px;
    display: flex;
    align-items: center;
    height: 44px;
}

input#amount {
    border: 0;
    outline: 0;
    max-width: 140px;
    text-align: left;
}

input#amount:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

form.nml_not {
    display: flex;
    gap: 12px;
    width: -webkit-fill-available;
}

form.nml_not input[type="submit"] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    flex: none;
    order: 1;
    flex-grow: 1;
    color: #fff;
    cursor: pointer;
}

.sing_prj_img {
    position:relative;
    height: 300px;
    overflow: hidden;
}

#main_kafalat_pg .sing_prj_img img {
    object-fit: contain;
}

.sing_prj_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.oi label {
    color: #959595;
    white-space: pre;
}

.sing_prj_details {
    text-align: center;
    font-size: 21px;
    padding: 0 23px 10px;
}

.sing_prj_payment {
    padding: 22px 23px;
    display: flex;
    gap: 10px;
}

.sing_prj_details a {
    display: block;
    border-top: 1.5px solid #000;
    padding: 12px 0;
}

img.remove_icon {
    display: none;
}

img.hover_icon {
    display: none;
}

.add_to_cart {
    display: flex;
    position: relative;
    padding: 6px;
    border: 2px solid #0078c5;
    border-radius: 5px;
    height: 44px;
    width: 44px;
    transition: all 0.1s ease-in-out;
    flex-basis: 100%;
    max-width: 44px;
}

.add_to_cart:hover:after {
    background-position: -180px 0px;
}

.add_to_cart:hover {
    border-color: #EC763F;
    background-color: #EC763F;
}

.add_to_cart:hover img.hover_icon {
    display: block;
}

.add_to_cart:hover img.add_icon {
    display: none;
}

.add_to_cart.remove_from_cart {
    border-color: #ec763f;
}

.add_to_cart.remove_from_cart img.remove_icon {
    display: block;
}

.add_to_cart.remove_from_cart:hover img.hover_icon {
    display: block;
}

.add_to_cart.remove_from_cart:hover img.remove_icon {
    display: none;
}

.add_to_cart.remove_from_cart:hover {
    background-color: #ec763f;
}

/* Define the progress bar container */
.progress-container {
    width: 100%;
    height: 20px;
    background-color: #ffffff;
}

/* Define the progress bar */
.progress-bar {
    position: relative;
    height: 100%;
    background-color: #1679c2;
    width: 0; /* Initial width set to 0 */
    transition: width 0.3s ease-in-out; /* Add transition effect */
}

/* Define the progress text */
.progress-text {
    position: absolute;
    top: 50%;
    left: 44px;
    transform: translate(-50%, -44%);
    color: white;
}

.progress-bar svg {
    width: 35px;
    height: 44px;
    position: absolute;
    left: -20px;
    top: -14px;
}

.woike_d,
.slkpde_d {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sloe_esd {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: flex-end;
}

.collected_ser {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 25px 23px 12px;
}

span.lkode__f {
    font-size: 19px;
}

.sloe_esd h3 {
    font-size: 25px;
    line-height: 25px;
}

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



/*
  Donation
*/
section.donation_opportunities {
    padding: 50px 0;
}

.blocks_links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    width: 100%;
    text-align: center;
}

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

.s_ico_s img {
    width: 70px;
    height: 70px;
}

a.si_opp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    gap: 10px;
    background: #f8f8f8;
    box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.06), 0px 8px 24px -4px rgba(24, 39, 75, 0.04);
    border-radius: 4px;
    transition: all 0.15s linear;
}

.s_tit_s {
    width: 100%;
    margin-top: 20px;
}

a.si_opp:hover {
    box-shadow: 0 20px 40px -2px rgba(50, 50, 93, 0.1), 0 20px 40px -2px rgba(0, 0, 0, 0.01);
    transform: translate3d(0, -5px, 0);
}

/*
  Numbers
*/
.asdm_numb {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    width: 100%;
    text-align: center;
}

.ksdj_sde h3 {
    color: #0078c5;
    font-size: 60px;
    letter-spacing: -1px;
    line-height: 68px;
}

.ksdj_sde {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    height: 250px;
    box-shadow: 0 0px 20px -2px rgb(40 40 93 / 6%), 0 20px 10px -2px rgba(0, 0, 0, 0.01);
    justify-content: center;
    font-size: 22px;
    font-weight: 300;
}

section.dona_numbers {
    padding: 50px 0;
}




/*
    Solutions
*/
.sing_sol_icn {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 16px 0px #6565651f;
    background: #fff;
    padding: 20px 20px;
    border: 1px solid #0078c5;
    border-radius: 5px;
    margin-bottom: 20px;
}

.sing_sol_icn img {
    width: 100%;
    height: auto;
}

.skjdie__dcor {
    display: flex;
    justify-items: center;
    text-align: center;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.sig_solu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    position: relative;
    width: 100%;
    padding-bottom: 30px;
    max-width: 290px;
}

a.donate_now {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    color: #fff;
    width: 100%;
    font-size: 17px;
    max-width: 78%;
}

.sing_sol_tit {
    font-size: 18px;
    margin-bottom: 10px;
}

.sig_solu:after {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: #f0f0f0;
    z-index: -1;
    max-height: 200px;
    box-shadow: 0px 0px 16px 0px #6565651a;
    border-radius: 4px;
}







/*
    Tamkeen
*/
.asdn_dsiue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

.image_dkjei_fluid {
    width: 50%;
    min-height: 100%;
}

.image_dkjei_fluid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.amoun_skdjir, .collected_amount, .project_cont_img_desc_coll, .oirkt_d, .oike_de {
    background: #F8F8F8;
    width: 50%;
    box-shadow: 0px 6px 12px -6px #18274B0F;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.se_smll_setit h3 {
    font-size: 34px;
    width: 100%;
}

.se_smll_setit {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    gap: 8px;
    font-size: 22px;
}

button.minus_sct, button.plus_sct {
    background: #fff;
    border: 1px solid #0078c5;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.inputs_content {
    display: flex;
    align-items: center;
    direction: rtl;
}

.cntrl_amnt {
    align-items: end;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.total_amnt {
    width: 100%;
    position: relative;
}

.number_sct {
    background: #fff;
    border-top: 1px solid #0078c5;
    border-bottom: 1px solid #0078c5;
    width: calc(100% - 80px);
    text-align: center;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button.minus_sct {
    border-radius: 5px 0 0 5px;
}

button.plus_sct {
    border-radius: 0 5px 5px 0;
}

svg.iconct {
    width: 12px;
}

.psldkemd {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 30px;
}

.val_conta {
    font-size: 14px;
}

span.label_sh {
    position: absolute;
    left: 10px;
    z-index: 1;
    top: 0;
    bottom: 0;
    height: 100%;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lkdor__ds p.text-muted {
    font-weight: 400;
    font-size: 18px;
}

.lkdor__ds {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lkdor__ds .sing_prj_payment {
    flex-direction: column;
    padding: 0;
}

.lkdor__ds .sing_prj_payment input#amount {
    width: 100%;
    max-width: 100%;
}

span.or_sel {
    text-align: center;
    font-size: 21px;
}

.amoun_skdjir .skie_fli label {
    height: 44px;
}

button.submit_ler {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    color: #fff;
    width: 100%;
    font-size: 17px;
}

.lksdoe_red {
    display: flex;
    gap: 15px;
}

.tab_ardaw .amoun_skdjir {
    gap: 40px;
}

.cut_skje_dds .se_smll_setit {
    padding-bottom: 15px;
}





/*
 CTA
*/
section.cta.center_content.bg_img {
    position: relative;
    width: 100%;
    height: auto;
}

.content_cta {
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 180px 0;
}

.bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.content_cta:before {
    opacity: 0.4;
    content: " ";
    position: absolute;
    background: #000;
    width: 100%;
    height: 100%;
}

.slkd__De {
    position: relative;
    z-index: 9;
    color: #fff;
    font-size: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slkd__De h3 {
    font-size: 30px;
    margin-bottom: 8px;
}

a.btn.def_btn {
    background: #0078c5;
    width: 100%;
    max-width: 230px;
    padding: 10px 0;
    border-radius: 5px;
    font-size: 20px;
}

.slkd__De span {
    display: block;
    margin-bottom: 30px;
}

a.btn_def {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    color: #fff;
    width: 100%;
    font-size: 17px;
}

a.btn_def:hover {
    background: #0668a6;
}




/*
    Partners
*/
ul.partners {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

ul.partners li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    width: 27%;
    padding: 20px 0;
}

ul.partners li img {
    width: 100%;
    height: auto;
    max-width: 250px;
    max-height: 90px;
    object-fit: cover;
    object-position: center center;
}

ul.partners li h3 {
    font-weight: 100;
    font-size: 24px;
}

ul.partners li:after {
    content: " ";
    width: 1px;
    height: 75%;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.partners li:last-child:after {
    display: none;
}

section.ghaith_partners {
    padding: 60px 0;
}






/*
    Select Box
*/
select {
    display: none !important;
}

.dropdown-select {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40FFFFFF', endColorstr='#00FFFFFF', GradientType=0);
    background-color: #fff;
    border-radius: 4px;
    border: solid 1px #eee;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: normal;
    height: 44px;
    line-height: 40px;
    outline: none;
    padding-right: 18px;
    padding-left: 30px;
    position: relative;
    text-align: right;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
    border: 2px solid #0078C5;
}

.dropdown-select:focus {
    background-color: #fff;
}

.dropdown-select:hover {
    background-color: #fff;
}

.dropdown-select:active,
.dropdown-select.open {
    background-color: #fff !important;
    border-color: #bbb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) inset;
}

.dropdown-select:after {
    -webkit-transform: origin(50% 20%);
    transform: origin(50% 20%);
    transition: all 0.125s ease-in-out;
    content: '';
    display: block;
    margin-top: -2px;
    pointer-events: none;
    position: absolute;
    left: 5px;
    top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7002 13.9L16.3002 9.30005L17.7002 10.7L11.7002 16.7L5.7002 10.7L7.10019 9.30005L11.7002 13.9Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
}

.dropdown-select.open:after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.dropdown-select.open .list {
    opacity: 1;
    pointer-events: auto;
}

.dropdown-select.open .option {
    cursor: pointer;
}

.dropdown-select.wide {
    width: 100%;
}

.dropdown-select.wide .list {
    left: 0;
    right: 0;
}

.dropdown-select .list {
    box-sizing: border-box;
    transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);
    background-color: #fff;
    border-radius: 0;
    margin-top: 4px;
    padding: 5px 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    z-index: 9;
    max-height: 250px;
    overflow: auto;
    border: 1px solid #ddd;
}

.dropdown-select .dd-search{
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0;
}

.dropdown-select .dd-searchbox{
  width:90%;
  padding:0.5rem;
  border:1px solid #999;
  border-color:#999;
  border-radius:4px;
  outline:none;
  display: none;
}

.dropdown-select .dd-searchbox:focus{
  border-color:#1679c2;
}

.dropdown-select .list ul {
    padding: 0;
}

.dropdown-select .option {
    cursor: default;
    font-weight: 400;
    line-height: 40px;
    outline: none;
    padding-left: 10px;
    padding-right: 15px;
    text-align: right;
    transition: all 0.2s;
    list-style: none;
}

.dropdown-select .option:hover,
.dropdown-select .option:focus {
    background-color: #f6f6f6 !important;
}

.dropdown-select .option.selected {
    font-weight: 600;
    color: #1679c2;
}

.dropdown-select .option.selected:focus {
    background: #f6f6f6;
}

.dropdown-select a {
    color: #aaa;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.dropdown-select a:hover {
    color: #666;
}

.pg_descrip.sort_inc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pg_descrip.sort_inc .sort {
    min-width: 250px;
}






/*
    Projects Page
*/
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
}

.controls button{
  position: relative;
  display: inline-block;
  height: 44px;
  min-width: 150px;
  background: #fff;
  color: #000000;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid #0078C5;
  box-shadow: 0px 4px 8px -1px rgb(24 39 75 / 14%);
}

button.filter.new:before {
    content: " ";
    width: 57px;
    height: 57px;
    display: block;
    position: absolute;
    left: -24px;
    top: -37px;
    background-image: url(../img/new.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.controls a {
  position: relative;
  display: inline-block;
  height: 44px;
  min-width: 150px;
  background: #fff;
  color: #000000;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid #0078C5;
  box-shadow: 0px 4px 8px -1px rgb(24 39 75 / 14%);
  text-align: center;
  align-content: center;
}

.controls a.active{
  background: #0078C5;
  color: #fff;
}

a.filter.new:before {
    content: " ";
    width: 57px;
    height: 57px;
    display: block;
    position: absolute;
    left: -24px;
    top: -37px;
    background-image: url(../img/new.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.controls button.active{
  background: #0078C5;
  color: #fff;
}

.container .mix,
.container .gap{
  display: inline-block;
}

.container .mix{
  display: none;
}







/*
    Payments Page
*/
.mu_lti_skde {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 0px;
}

.skjde_right {
    background: #F8F8F8;
    box-shadow: 0px 6px 12px -6px rgb(24 39 75 / 6%);
    padding: 60px;
    height: fit-content;
}

.skjde_right label {
    margin-bottom: 4px;
    font-size: 17px;
    display: block;
    width: 100%;
}

.skjde_right form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 0px;
}

.inpt_cont input {
    width: 100%;
    border: 1px solid #C6C6C6;
    border-radius: 4px;
}

.exp_dte {
    display: flex;
    background: #fff;
    border: 1px solid #C6C6C6;
    border-radius: 4px;
}

.exp_dte input {
    border: 0;
    outline: 0;
}

.exp_dte input:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.save_nxt {
    display: flex;
    gap: 10px;
    align-items: center;
}

.save_nxt label {
    font-size: 15px;
    margin: 0;
    color: #636363;
}


.total_amount_skj, .askdjir_d, .donat_csing {
    background: #F8F8F8;
    box-shadow: 0px 6px 12px -6px rgb(24 39 75 / 6%);
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.skjde_left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.submit_sva button, #openBankModalBtn {
    background: #0078c5;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px;
    font-size: 19px;
    color: #fff;
}

h2#tal_amount {
    font-size: 34px;
}

.blc_tit {
    font-size: 21px;
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 25px;
}

.submit_sva {
    margin-top: 15px;
}

.askjir__tr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
}

.bank_name_logo {
    height: 200px;
    overflow: hidden;
}

.bank_name_logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.askdjir_d {
    background: #F8F8F8;
    box-shadow: 0px 6px 12px -6px rgb(24 39 75 / 6%);
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

span.tra_tit {
    font-size: 23px;
    margin-bottom: 15px;
    display: block;
}

.bank_account button.close-modal-btn,
.confirm_subscr button.close-modal-btn {
    top: 0px;
    left: 20px;
}

.bak_logo_im {
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.bak_logo_im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.askdjir_lkd {
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    gap: 0;
}

.bak_nme_im {
    font-size: 25px;
    text-align: center;
    padding: 15px 0;
    border-bottom: 2px solid #c6c6c6;
}

.bnk_det {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bnk_det > div {
    display: flex;
    justify-content: space-between;
}

.bnk_det span {
    display: block;
}

#paymentUpdatePanel div {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #000;
    cursor: pointer;
    border-radius: 5px;
    height: 50px;
    transition: 0.25s ease all;
}

#paymentUpdatePanel a {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iti input, .iti input[type=text], .iti input[type=tel] {
    height: 42px
}



/*
    Cart
*/
.donat_csing {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 35px;
}

.oi_cart {
    position: relative;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    background: #fff;
    padding: 0 12px 0 12px;
    display: flex;
    align-items: center;
    height: 44px;
    justify-content: space-between;
    font-size: 15px;
    color: #413d3d;
}

.oi_cart .amount_cart_calc {
    text-align: right;
    padding-right: 0;
    outline: 0;
    border: 0;
    overflow: hidden;
}

.oi_cart .amount_cart_calc:focus {
    border: 0;
    box-shadow: none;
}

.askdji_contart {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.car_co_ekjir {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.prj_se h3 {
    font-size: 18px;
}

.prj_se {
    font-size: 15px;
}

.donat_csing .sing_prj_payment {
    padding-left: 0;
    padding-right: 0;
}

.donat_csing form.nml_not {
    width: calc(100% - 44px);
}

.cart_empty_dcont {
    background: #f8f8f8;
    box-shadow: 0px 6px 12px -6px rgb(24 39 75 / 6%);
    padding: 60px 50px 70px 50px;
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: center;
    text-align: center;
}

.svg_icn svg {
    width: 140px;
    height: 140px;
}

.lksd_dkjeir h1 {
    font-size: 38px;
    font-weight: 400;
}

.lksd_dkjeir {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cart_empty_dcont span {
    font-size: 18px;
    display: block;
    max-width: 40%;
}

.cart_empty_dcont a {
    color: #fff;
}

.add_to_cart {
    overflow: hidden;
}

.add_to_cart:after {
    content: " ";
    width: 30px;
    height: 30px;
    background-image: url(../img/shoping-cart.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 210px;
    position: absolute;
}

.add_to_cart.remove_from_cart:hover:after {
    background-position: -149px 0;
}

.add_to_cart.remove_from_cart:after {
    background-position: -58px 0;
}










/*
    Single Project
*/
.pie {
  text-indent: -9999rem;
  width: 7.6rem;
  height: 7.6rem;
  border-radius: 100%;
  background: 
    linear-gradient(-90deg, #0078C5 50%, transparent 50%),
    linear-gradient(180deg, #DBDBDB 50%, #0078C5 50%);
  position: relative;
  transition: all .5s ease-in-out;
}

.pie:after {
  content: '%' attr(data-percentage);
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 100%;
  background: #f8f8f8;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  text-align: center;
  text-indent: 0;
  line-height: 108px;
  letter-spacing: -1px;
  font-weight: 600;
  color: #1679c2;
}

.collected_amount {
    align-items: center;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
}

.sdkj_dkjr_fd {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.ttal_sa h1 {
    font-size: 19px;
    font-weight: 100;
}

.ttal_sa h3 {
    font-size: 28px;
    color: #1679c2;
    line-height: 33px;
}

.askjr__fhy {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    font-size: 18px;
}

.ttal_sa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sakdjir__skje {
    border-right: 1.5px solid #000;
}

.project_cont_img_desc_coll {
    width: 100%;
    margin-bottom: 30px;
    padding: 60px;
}

.project_cont_img_desc_coll .prj_nme h3 {
    font-size: 40px;
    font-weight: 500;
}

.project_cont_img_desc_coll .sing_prj_head {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.project_cont_img_desc_coll .image_dkjei_fluid {
    width: 100%;
    height: 420px;
    margin-bottom: 25px;
}

.sing_proj_descsm {
    font-size: 20px;
}

.asdn_dsiue .amoun_skdjir {
    height: fit-content;
    width: 100%;
}

.left_side_amount_se {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.oirkt_d {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    flex-wrap: nowrap;
}

.oirkt_d .ttal_sa {
    align-items: flex-start;
}

.sdkjiirr_dse {
    width: 100%;
    border-right: 1.5px solid #000;
    padding-right: 20px;
}

.oirkt_d .sdkjiirr_dse:first-child {
    border: 0;
    padding: 0;
}

.oirkt_d .sdkjiirr_dse:last-child .ttal_sa {
    align-items: center;
}

.left_side_amount_se .sing_prj_payment {
    gap: 18px;
}

.asldor__se {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1.5px solid #000;
    align-items: center;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.asldor__se a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 50px;
    gap: 10px;
    font-size: 18px;
}

.ssldk_gift {
    /*border-right: 1.5px solid #000;*/
}

.si_spo_img {
    width: 176px;
    height: 108px;
    overflow: hidden;
}

.si_spo_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oike_de {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.spo_det {
    font-size: 18px;
}

.spo_det h3 {
    font-weight: 100;
}

#dawry_pa {
    grid-column-gap: 0;
    grid-row-gap: 0;
}

#dawry_pa .project_cont_img_desc_coll {
    margin: 0;
    height: 100%;
    padding: 30px;
}

#dawry_pa .project_cont_img_desc_coll .image_dkjei_fluid {
    margin: 0;
}











/*
    Login
*/
.error-message {
    color: red;
    display: none; /* Initially hide error messages */
}

.askjdi_logn {
    background: #F8F8F8;
    width: 100%;
    max-width: 740px;
    box-shadow: 0px 6px 12px -6px #18274B0F;
    padding: 50px 60px 70px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.slkje_de {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.slkje_de svg {
    width: 60px;
    height: 77px;
    display: block;
}

h2.he_titcent {
    font-size: 24px;
    text-align: center;
}

.l_frm_s input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    opacity: 0.8;
    border: 1.5px solid #C6C6C6;
    border-radius: 4px;
    margin-bottom: 6px;
}

#dvEmail {
    margin-bottom: 20px;
}

.aslke_date_bi {
    display: flex;
    gap: 20px;
}

.l_frm_s label {
    font-size: 18px;
    display: block;
    margin-bottom: 9px;
}

.kjd_bltit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 45px;
}

.l_frm_s input#remember_me {
    width: 20px;
    height: 20px;
    padding: 0;
}

button#registrationSubmitButton, button#submitButton, a.new_registration, a.back_login, a.cancel, #replacePoints {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    color: #fff;
    width: 100%;
    font-size: 17px;
}

p.skjse_fefg {
    display: block;
    text-align: center;
    width: -webkit-fill-available;
    white-space: pre;
    padding: 0 10px;
}

.dlkoe_de {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.skjdie_rkj {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#registrationForm,
#loginForm,
#newPassword,
#resetAccount {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.asdkji__dlke span {
    display: block;
    width: -webkit-fill-available;
    height: 1px;
    background: #000;
}

.asdkji__dlke {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    margin: 20px 0;
}

a.back_login, a.new_registration, a.cancel, #replacePoints {
    background: #FFF;
    color: #000;
    border: 2px solid #0078C5;
}

#res_lkoe_fpas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

#replacePoints {
    width: fit-content;
}

.skje_ksie_repl {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#UpdatePanel1LoginBtn {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

#UpdatePanel1LoginBtn button {
    background: #FFF;
    color: #000;
    border: 1px solid #0078C5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    padding: 5px 0;
    border-radius: 3px;
    font-size: 15px;
    transition: all 0.25s ease-in-out;
}

#UpdatePanel1LoginBtn button:hover {
    background-color: #f5fbff
}

#UpdatePanel1LoginBtn button img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}




/*
    Profile
*/
.vertical-tabs {
  display: flex;
  flex-direction: column;
  max-width: 350px;
}

.tab {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  flex-direction: row;
  font-size: 20px;
  gap: 20px;
  transition: 0.25s ease all;
  border-left: 2px solid #B8B8B8;
  position: relative;
}

a#sign_out {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    flex-direction: row;
    font-size: 20px;
    gap: 20px;
    margin-top: 20px;
}

.tab:after {
    content: " ";
    width: 6px;
    height: 100%;
    position: absolute;
    left: -4px;
    background: transparent;
}

.tab.active:after {
    background: #0078c5;
}

.tab-content {
  display: none;
  transition: opacity 0.5s ease;
}

.tab-content.active {
  display: block;
  opacity: 1;
}

.tab:hover {
    background: #f9f9f9;
}

.feather-icon {
  margin-left: auto;
  width: 20px;
}

.ksjdie_dkjse_se {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 0px;
    max-width: 1290px;
    margin: 0 auto;
}

.avatar-upload {
     position: absolute;
     max-width: 145px;
     margin: 0 auto;
     left: 0;
     right: 0;
     top: -100px;
}
 .avatar-upload .avatar-edit {
     position: absolute;
     left: 2px;
     z-index: 1;
     bottom: -10px;
}

 .avatar-upload .avatar-edit input {
     display: none;
}

 .avatar-upload .avatar-edit input + label {
     display: inline-block;
     width: 45px;
     height: 45px;
     margin-bottom: 0;
     border-radius: 100%;
     background: #0078C5;
     box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
     cursor: pointer;
     font-weight: normal;
     transition: all .2s ease-in-out;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

 .avatar-upload .avatar-edit input + label:hover {
     background: #056aab;
}

 .avatar-upload .avatar-preview {
     width: 145px;
     height: 145px;
     position: relative;
     border-radius: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

 .avatar-upload .avatar-preview > div {
     width: 100%;
     height: 100%;
     border-radius: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     min-width: 145px;
     min-height: 145px;
}

.tab svg path {
    transition: 0.25s ease all;
}

.tab:hover svg path,
.tab.active svg path {
    stroke: #056aab;
}

.tab:hover,
.tab.active {
    color: #056aab;
}

span.welcome_msg {
    font-size: 23px;
}

.ksd_skhde {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-top: 10px;
}

ul#userDetailsList li strong {
    display: block;
    font-size: 19px;
    font-weight: 100;
    margin-bottom: 11px;
}

ul#userDetailsList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

ul#userDetailsList input {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    height: 44px;
    background: #FFFFFF;
    opacity: 0.8;
    border: 1.5px solid #C6C6C6;
    border-radius: 4px;
}

#account {
    box-shadow: 0px 6px 12px -6px #18274B0F;
    background: #F8F8F8;
    padding: 50px 50px;
    position: relative;
    margin-top: 100px;
    border-radius: 2px;
}

span.skjdie__efr {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    align-items: center;
}

.asdkie_user_pr img {
    width: 90px;
    height: 90px;
}

.asdkie_user_pr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-size: 19px;
    margin-bottom: 40px;
}

button.edit-mode.cancel_yasta {
    color: #EC763F;
    margin-right: 10px;
}

button.edit-mode {
    display: none;
    color: #0078c5;
}

.askdjie__r {
    display: flex;
    gap: 10px;
    color: #0078c5;
}

.askdjie__r svg {
    width: 18px;
    height: 20px;
}

button#toggleTabs {
    visibility: hidden;
    margin-bottom: 30px;
}





/*
    Donation History
*/
.segel_fl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #0078c5;
    padding: 6px 10px;
    align-items: center;
    margin-bottom: 20px;
    height: 56px;
}

.segel_fl h3 {
    color: #fff;
    font-size: 19px;
    white-space: nowrap;
    padding-right: 20px;
}

.segel_fl .filter_seseg {
    max-width: 250px;
}

.sing_donat_aseg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    padding: 15px 30px;
    margin: 15px 0;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    box-shadow: 0px 6px 12px -6px #18274b0f;
}

.tab_cont_ent_se.estekhaba {
    display: none;
}

#back_to_summ .skje__flkry_g, #back_to_tabarouatak .skje__flkry_g {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: flex-end;
}

#back_to_summ, #back_to_tabarouatak {
    cursor: pointer;
    padding: 10px 0;
}

#confirmModal, #confirmModalremove {
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 20%;
    right: 0;
    margin: auto;
    padding: 40px;
    max-width: 470px;
    min-height: 15rem;
}

#confirmModal p {
    font-size: 19px;
    text-align: center;
    margin-top: 30px;
}

.modal-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 45px auto 0;
    max-width: 100%;
}

.sec_color {
    background: #e97546;
    border-radius: 4px;
    font-size: 16px;
    color: #fff!important;
    transition: 0.25s ease all;
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sec_color:hover {
    background: #e36330;
}

.confirm_subscr.active, .confirm_remove.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.proj_dte_sr,
.proj_mnt_sr,
.proj_nme_sr,
.proj_actions_sr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.proj_actions_sr {
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.proj_actions_sr a, #oid_skje_s {
    display: block;
    width: 100%;
    border: 1.5px solid #0078c5;
    padding: 5px 0;
    border-radius:4px;
}

.proj_actions_sr a:hover,
#oid_skje_s:hover,
#replacePoints:hover {
    background: #0078c5;
  color:#fff;
}
#oid_skje_s, .btn_without_bg {
    width: 100%;
    border: 2px solid #0078c5;
    padding: 5px 0;
    border-radius: 4px;
    height: 45px;
    transition: 0.25s ease all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

a.re_subscr {
    background: #e97546;
    border-color: #e97546;
    color: #fff;
}

.show_ince,
.show_trkr {
    width: 100%;
    text-align: center;
}

#oid_skje_s:hover, #replacePoints:hover, .btn_without_bg:hover {
    background: #0078c5;
    color: #fff;
}

.proj_mnt_sr h3 small {
    font-weight: 100;
}

#oid_skje_s {
    text-align: center;
    max-width: fit-content;
    padding: 5px 20px;
    white-space: nowrap;
    margin: 20px auto 0;
}

.gr_csin {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 20px;
}

.frm_sig label,
.frm_sig_fll label {
    padding-bottom: 8px;
    display: block;
}

.frm_sig_fll {
    margin-bottom: 30px;
}

.skjd_join_us_frm {
    max-width: 900px;
    padding: 50px;
    margin: 40px auto;
    box-shadow: 0px 6px 12px -6px #18274b0f;
}





/*
    Share Donation
*/
.sdk_con_bloc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    justify-items: center;
    align-items: center;
    margin-top: 30px;
}

.askje_sing_sjei {
    width: 100%;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 2px solid #0078c5;
    padding: 20px 10px 10px 10px;
    border-radius: 5px;
    box-shadow: 0px 6px 12px -6px #18274b36;
}

.img_slkeoad_s img {
    width: 110px;
    height: 110px;
}

.asdkie_tit_soek h3 {
    font-weight: 100;
    font-size: 18px;
    white-space: nowrap;
}

.aslkdjie_pow_e h3 {
    font-size: 35px;
    color: #1679c2;
}

.aslkdjie_pow_e h3 small {
    font-size: 16px;
    font-weight: 100;
    color: #000;
}

.aslkdjie_pow_e {
    width: 100%;
    text-align: center;
    border-top: 1.5px solid #000;
    margin-top: 10px;
    padding-top: 3px;
}

.ks_sectit h3 {
    font-size: 22px;
}

.kksje_sel_a {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f8f8f8;
    padding: 10px 10px 15px 10px;
    text-align: center;
}

.kksje_sel_a img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    margin-bottom: 5px;
}

.okle_skjef {
    display: flex;
    flex-direction: column;
    gap: 60px;
}







/*
    Progress
*/
.progressContainer {
    align-content: center;
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

.progress {
    position: relative;
    padding: 0 4rem 0 1rem;
    margin: 2rem 0 0;
    list-style: none;
}

.progress__item {
    position: relative;
    min-height: 75px;
    counter-increment: list;
    align-content: center;
    position: middle;
    border: 1px solid #f0f0f0;
    padding: 15px 25px;
    margin: 18px 0;
    border-radius: 5px;
    box-shadow: 0px 6px 12px -6px #18274b0f;
}

.progress__item:before {
    content: "";
    position: absolute;
    right: -43px;
    top: 45px;
    height: 71%;
    width: 1.5px;
    background: #1679c2;
}

.progress__item:after {
    content: " ";
    position: absolute;
    top: 0;
    right: -4rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    border: 1.5px solid #1679c2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33333 12.8666L0 7.53325L1.86667 5.66659L5.33333 9.13325L14.1333 0.333252L16 2.19992L5.33333 12.8666Z' fill='%230078C5'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 17px;
    background-color: #fff;
}

.progress__item:last-child:before {
    border: none;
    background: transparent;
}

.progress__title {
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

.progress__info {
    font-size: 19px;
    font-weight: 700;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}






/*
    Donation Participate
*/
section.slkoe_clsec_blocks {
    padding: 70px 0;
    background-image: url(../img/Illustration-do.svg);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

.si_blco_s {
    background: #F8F8F8;
    padding: 40px 30px 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    min-height: 370px;
}

.skje__dkoemor {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
}

span.num_blc {
    right: 15px;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    font-size: 35px;
    font-weight: 600;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #161515;
    color: #fff;
}

.a_inf {
    background: #0078C5;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.a_inf svg {
    width: 26px;
    height: 26px;
}

.bloc_secont_cen h3 {
    font-size: 18px;
}

.skje__skje_desc {
    padding-top: 20px;
    border-top: 2px solid #000;
    margin-top: 20px;
}

.cust_stic {
    width: 100%;
    display: flex;
    margin-top: 35px;
    justify-content: center;
    align-items: center;
}

.skjie_sub_conte {
    font-size: 19px;
    max-width: 50%;
    margin: 30px auto 0;
}




/*
*/
.hystmodal__shadow.act {
    opacity: 0.5;
}

#bankModal {
    background: #fff;
}

button.close-modal-btn {
    position: absolute;
    right: 30px;
    margin-top: 30px;
}





/*
    About Us
*/
.ab_gh_conrt {
    font-size: 20px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
    grid-column-gap: 100px;
    grid-row-gap: 0px;
}

.skjd_img {
    height: 400px;
}

.asl_conta h2 {
    font-size: 45px;
    color: #0078c5;
    font-weight: 400;
}

.block_sje__wr h3 {
    font-size: 30px;
    color: #0078c5;
    font-weight: 400;
    margin-bottom: 20px;
}

.ab_gh_cospoe {
    font-size: 17px;
    margin-top: 50px;
}

.skjie_fkelll_a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.block_sje__wr p:before {
    position: absolute;
    content: " ";
    width: 3px;
    height: 100%;
    background: #0078c5;
    right: 0;
    top: 0;
    bottom: 0;
}

.block_sje__wr p {
    position: relative;
    padding: 5px 20px 5px 0;
}

.skjd_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.asl_conta {
    margin-bottom: 10px;
}







/*
    FAQ
*/
.accordion-item {
    background: #F8F8F8;
    padding: 8px 30px;
    box-shadow: 0px 6px 12px -6px #18274B0F;
}

.accordion-header {
    background-color: #F8F8F8;
    padding: 20px 0 20px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.accordion-content {
    height: 0;
    overflow: hidden;
    transition: all 0.15s linear;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item.active .accordion-header {
    border-bottom: 1.5px solid #808080;
}

.accordion-content p {
    padding: 20px 0;
    font-size: 17px;
}

.accordion-item.active svg.accordion-icon,
svg.accordion-icon-opn {
    display: none;
}

.accordion-item.active svg.accordion-icon-opn {
    display: block;
}

.accordion-header h3 {
    font-size: 18px;
}

.arr_icn svg {
    width: 17px;
    height: 17px;
}







/*
    Single Page
*/
.page_content_sing {
    font-size: 19px;
    box-shadow: 0px 6px 12px -6px #18274b0f;
    padding: 30px 0;
}

.page_content_sing p {
    padding: 30px 50px;
}





/*
    Zakat Calculator
*/
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
     content: counter(stepNum);
     font-size: 19px;
     text-indent: 0;
}

.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
     background-color: #ededed;
}

.multi-steps {
     display: table;
     table-layout: fixed;
     width: 100%;
}

.multi-steps > li {
     counter-increment: stepNum;
     text-align: center;
     display: table-cell;
     position: relative;
     color: #0078C5;
     font-size: 17px;
}

.multi-steps > li:before {
     content: ".";
     display: block;
     margin: 0 auto 9px;
     background-color: #fff;
     width: 44px;
     height: 44px;
     line-height: 43px;
     text-align: center;
     font-weight: 100;
     border-width: 1px;
     border-style: solid;
     border-color: #DFDFDF;
     border-radius: 50%;
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33333 12.8667L0 7.53337L1.86667 5.66671L5.33333 9.13338L14.1333 0.333374L16 2.20004L5.33333 12.8667Z' fill='%230078C5'/%3E%3C/svg%3E%0A");
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 19px;
     text-indent: 999999px;
     overflow: hidden;
}

.multi-steps > li:after {
     content: "";
     height: 2px;
     width: 100%;
     background-color: #0078C5;
     position: absolute;
     top: 21px;
     right: 50%;
     z-index: -1;
}

.multi-steps > li:last-child:after {
     display: none;
}

.multi-steps > li.is-active:before {
     color: #fff;
     border-color: #0078C5;
     background: #0078C5;
}

.multi-steps > li.is-active ~ li {
     color: #000000;
}

.multi-steps > li.is-active ~ li:before {
    background: #fff;
}

.bd_g {
    box-shadow: 0px 6px 12px -6px #18274B1F;
    background: #F8F8F8;
    padding: 50px 60px 60px 60px;
    height: fit-content;
    position: relative;
}

.oioir_dse {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 0px;
}

.zak_container {
    margin-top: 80px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.lks_zak_tit h3, .tot_btit h3 {
    font-size: 25px;
    font-weight: 400;
}

.lks_zak_tit {
    margin-bottom: 25px;
}

#selc_cur_fm {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.tot_btit {
    border-bottom: 2px solid #000;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.tol_dkjr_se h2 {
    font-size: 45px;
}

.tol_dkjr_se {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-size: 16px;
}

.extra_amount {
    margin-top: 40px;
}

.oi_rxt {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.oi_rxt label {
    font-size: 23px;
}

.right_si_conskje {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.frm_g {
    display: flex;
    align-items: center;
    gap: 8px;
}

#zakat_type_se, #zakat_hawl_se {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 12px;
}

.na_step {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 40px;
}

.frm_g label {
    padding: 6px 2px;
    display: block;
    cursor: pointer;
    width: -webkit-fill-available;
}

.close_selected_one {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 40px;
    height: 40px;
}

a.close_sele {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.value_of_selected {
    font-size: 20px;
    margin-bottom: 15px;
}

.bd_g input#amount {
    max-width: -webkit-fill-available;
}

.select_hawl,
.zakat_selected_one,
.select_zakat_type {
    display: none;
}

.select_zakat_type.active {
    display: block;
}

.step_active {
    display: block !important;
}

.step_active {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}


/*
    Select type
*/
.calc_oaub {
    max-width: 550px;
    margin: 20px auto 0;
    text-align: center;
}

.askdje__dek h3 {
    font-size: 25px;
    font-weight: 100;
    margin-bottom: 30px;
}

.cu_ti {
    position: relative;
}

.input-group {
    text-align: right;
    margin-bottom: 15px;
}

.input-group label {
    width: 100%;
    font-size: 19px;
    display: block;
    margin-bottom: 5px;
}

.cu_ti span {
    position: absolute;
    left: 12px;
    bottom: 8px;
}

.or_soe {
    display: block;
    width: 100%;
    padding: 20px 0;
    font-size: 19px;
}

.nor_btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 44px;
    background: #fff;
    border-radius: 4px;
    color: #0078c5;
    width: 100%;
    font-size: 17px;
    border: 2px solid #0078c5;cursor: pointer;
}



/*
    Kfalat
*/
.tabs {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 20px auto;
    gap: 20px;
    flex-wrap: nowrap;
}

.sam_im img {
    width: auto;
    height: 100%;
}

.images_fch {
    transform: translate(-110px, 0px);
}

.kf_tab {
    padding: 11px 0px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 0.4rem;
    min-width: 10rem;
    width: 100%;
    overflow: hidden;
    border: 0.15rem solid #0078c5;
    color: #000;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 8px -2px #18274b05, 0 4px 6px -4px #18274b0a;
    justify-content: center;
    transition: all 0.15s linear;
    font-size: 17px;
}

.kf_tab.active {
    background-color: #0078c5;
    color: #fff;
    pointer-events: none;
    cursor: default;
}

.kfalatcontent {
    display: none;
    /* padding: 20px; */
    max-width: 1370px;
    margin: 0 auto;
}

.kfalatcontent.active {
    display: block;
}

.sa_bloc_con img {
    width: 70px;
    height: auto;
}

.sa_bloc_con .amount {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: center;
}

.sa_bloc_con .amount button {
    width: 43px;
    height: 43px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid #1679c2;
    border-radius: 50%;
    transition: 300ms cubic-bezier(.215,.61,.355,1);
}

.sa_bloc_con .amount button:active {
    transform: scale(.92)
}

.sa_bloc_con .amount button svg {
    width: 15px;
    height: 15px;
}

.sa_bloc_con .amount input.amountInput:focus {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.sa_bloc_con {
    width: 240px;
    height: 335px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border: 2px solid #0078c5;
    border-radius: 6px;
    box-shadow: 0 8px 24px -4px #18274b0a,0 6px 12px -6px #18274b0f!important;
    padding: 30px 0 30px 0;
    background-color: #fff;
}

.sa_bloc_con .amount input.amountInput {
    border: 0;
    outline: 0;
    font-size: 42px;
    font-weight: 400;
    color: #000;
    padding: 0;
    text-align: center;
    height: 55px;
    width: auto;
    max-width: 80px;
}

span.kfala_amount {
    font-size: 20px;
}

span.kfala_nme {
    display: block;
    font-size: 18px;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.images_fch {
    position: relative;
    width: 493px;
    height: 406px;
    margin: 0 auto;
}

.sam_im {
    width: 100%;
    height: 100%;
    position: absolute;
    /* visibility: hidden; */
}

.fst_sec_cont {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
    justify-items: end;
    margin-top: 50px;
    position: relative;
}

.blc_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 150px;
    left: 0;
    z-index: -3;
    background-image: url(../img/new_main_bg.333f14a76e040d2a.webp);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 730px;
}

.btm_blocks {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 60px;
}

.sam_im.re3aya {
    z-index: -1;
}

.sam_im.marafeq {
    z-index: -2;
}

.sam_im.fohosat-back {
    z-index: -1;
}

.beet {
    z-index: -2;
}

.athath-back {
    z-index: -1;
}

.sam_im.ast4ara.medium.item,
.sam_im.srer.item,
.sam_im.hatab.medium.item,
.sam_im.kahrba.large.item {
    z-index: -1;
}

.sam_im.active {
    visibility: visible;
}

.kjs_sub_all {
    display: flex;
    align-items: center;
    box-shadow: 0 6px 8px -2px #18274b05, 0 4px 6px -4px #18274b0a;
    border-radius: 0.4rem;
    border: 1.5px solid #c6c6c6;
    background: #fff;
    padding: 0 16px;
    height: 44px;
    width: 25%;
    justify-content: space-between;
}

.total_amount_collected {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    gap: 15px;
}

input.total_amount_col_ed {
    border: 0;
    outline: 0;
    width: 100px;
    text-align: left;
    cursor: default;
}

.f_tot_mnt {
    display: flex;
    align-items: center;
}

input.total_amount_col_ed:focus {
    box-shadow: none;
    border: 0;
}

input.block_amount_tot {
    display: none;
}













/*
  Footer
*/
footer {
    margin-top: 60px;
}

.ftr_logo {
    width: 90px;
    height: 42px;
}

.ftr_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ftr_menu {
    color: #fff;
    display: flex;
    gap: 0px;
}

.ftr_menu a {
    display: block;
    padding: 10px 20px;
}

.ftr_menu a:hover {
    opacity: 0.7;
}

.rit_s {
    display: flex;
    align-items: center;
    gap: 30px;
}

.ftr_lgs {
    display: flex;
    align-items: center;
    gap: 20px;
}

.divi_t {
    height: 40px;
    width: 1px;
    background: #fff;
}

.erc_ftr_logo {
    width: auto;
    height: 45px;
}

img.erc_fot_lgo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media(max-width: 625px) {
    .rit_s {
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 100%;
    }
    
    .ftr_logo {
        width: 100px;
        height: 48px;
    }
    
    .erc_ftr_logo {
        height: 57px;
    }
    
    .lft_s {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        border-top: 1.5px solid #fff;
        padding-top: 20px;
    }
    
    .ftr_menu {
        gap: 15px;
    }
}

.fst_ftr {
    background: #0078c5;
    height: 80px;
    display: flex;
    align-items: center;
}

.sci_icons {
    display: flex;
    align-items: center;
}

.social_se {
    display: flex;
    color: #fff;
    gap: 30px;
    align-items: center;
    font-size: 18px;
}

.sci_icons a {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ksmd_ddlks {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copyrights {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.sci_icons a:hover {
    opacity: 0.7;
}

/*
  Social Share
*/
.challenge .number {
    float: right;
}

.content .shareButton.main .share,
.content .shareButton.main .close,
.content .shareButton.main .check {
    position: absolute;
    top: 13px;
    left: 13px;
    transition: all 150ms;
}

.content .shareButton.main .share,
.content .shareButton.main.open .close,
.content .shareButton.main.sent .check {
    transform: rotate(0) scale(1);
    opacity: 1;
}

.content .shareButton.main .close,
.content .shareButton.main.open .share,
.content .shareButton.main .check,
.content .shareButton.main.sent .share {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

.shareButton,
.shareButton.open {
    border: none;
    border-radius: 50%;
    padding: 12px;
    overflow: hidden;
    outline: none;
    width: 24px;
    height: 24px;
    box-sizing: content-box;
    transition: all 100ms;
    position: relative;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 transparent;
    transition: 0.2s ease all;
}

.shareButton svg,
.shareButton.open svg {
    display: block;
    fill: #1679c2;
    width: 24px;
    height: 24px;
    opacity: 1;
    transition: all 150ms;
    transform: scale(1);
}
.wb,
.shareButton.open.ig {
    transition-delay: 150ms;
}
.fb,
.shareButton.open.ig {
    transition-delay: 100ms;
}

.tw,
.shareButton.open.tw {
    transition-delay: 50ms;
}

.ig,
.shareButton.open.fb {
    transition-delay: 0ms;
}
.wb,
.fb,
.tw,
.ig {
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0);
}
.wb svg,
.fb svg,
.tw svg,
.ig svg {
    width: 0;
    height: 0;
    opacity: 0;
    transform: scale(0);
}

.content {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    left: 0;
    top: 0;
    gap: 8px;
}

.prj_shre {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.open {
    background: #fff;
}

.shareButton.open:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

button.shareButton.main.open:hover {
    transform: scale(1) translateY(0px);
    box-shadow: none;
}

/**
 * Fast Donation Modal
 */
.side_donation {
    position: fixed;
    top: 160px;
    left: 0;
    transform: translateX(-511px);
    transition: all 0.35s ease-in-out;
}

.donation_modal {
    background: #fff;
    width: 510px;
    border-radius: 0 0 10px 0;
}

#toggleLink {
    position: absolute;
    right: -110px;
    width: 110px;
    background: #0078c5;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 11px 12px;
    gap: 10px;
    border-radius: 0 5px 5px 0;
    transition: all 0.25s linear;
}

#toggleLink > span {
    text-align: center;
}

.side_donation.warehaly {
    transform: translateX(0);
}

body.mobile_menu_act .hystmodal__shadow {
    opacity: 0.6;
}

body.mobile_menu_act #toggleLink {
    right: 110px;
}

#toggleLink:hover {
    opacity: 0.8;
}

.modal_header {
    padding: 27px 30px 10px 30px;
    margin-bottom: 0px;
    text-align: center;
}

.modal_header h3 {
    margin: 0;
    color: #000;
    font-size: 31px;
    font-weight: 400;
}

.modal_header span {
    color: #6e7375;
    max-width: 88%;
    display: block;
    line-height: 22px;
}

/* The Bank Account Modal */
.bank_account {
   position: fixed; /* Stay in place */
   z-index: 999999; /* Sit on top */
   left: 0;
   top: 20%;
   right: 0;
   margin: auto;
   padding: 40px;
   max-width: 400px;
   visibility:hidden;
}

.skdu_de {
    padding: 7px 25px 20px 25px;
}

.form-group lable {
    position: absolute;
    top: -10px;
    left: 8px;
    background: #fff;
    padding: 0 6px;
    font-size: 15px;
}

.skdu_de .form-group {
    position: relative;
    margin-bottom: 17px;
}

.skdu_de .form-group input {
    width: 100%;
    border: 1px solid #e5e5e5;
    outline: 0;
    padding: 0 8px;
    border-radius: 6px;
    height: 100%;
    display: block;
}

.skdu_de .form-group select {
    width: 100%;
    border: 1px solid #e5e5e5;
    outline: 0;
    padding: 0 15px;
    border-radius: 6px;
    height: 100%;
    display: block;
}

.bg_chng {
    display: block;
    background-color: #ffffff;
    border-radius: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 7px;
}

.bg_chng img {
    width: 25px;
    height: 21px;
}

input[type="radio"]:checked + .bg_chng {
    background-color: #0078c5;
    color: #fff;
}

.modal-overlay,
.modal-overlay-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgb(0 0 0 / 58%);
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

span.skjd_tit {
    display: block;
    font-size: 16px;
    padding: 10px 0;
}

.skie_fli label {
    border: 0;
}

/* Show the checkmark when checked */
.containerCheckbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerCheckbox .checkmark:after {
    left: 8px;
    top: 4.5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.donation_type {
    padding: 5px 0 40px 0;
}

.skie_fli {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.skie_fli label {
    width: 100%;
    background: #fff;
    border: 1px solid #0078c5;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    height: 45px;
    letter-spacing: -0.3px;
}

.skie_fli label:last-child {
    max-width: 190px;
}

.skie_fli label input {
    visibility: hidden;
    opacity: 0;
    display: none;
}

.skie_fli label p.text-muted, p.text-muted {
    display: block;
    margin: 0;
    z-index: 1;
    font-weight: 300;
    font-size: 17px;
}

.skie_fli label input {
    display: none;
}

span.or_add_custom {
    text-align: center;
    display: block;
    padding: 0 0 13px 0;
    font-size: 16px;
}

.skdu_de .form-group input#amount {
    max-width: 100%;
}

button.sub_proj {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 24px;
    gap: 10px;
    height: 44px;
    background: #0078c5;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    width: 100%;
    font-size: 19px;
}

.fast_don_submit {
    margin-top: 30px;
    display: flex;
    gap: 10px;
}






/*
    Site Modal
    HYSTÐœODAL
    VER. 0.5
    https://addmorescripts.github.io/hystModal/
*/
.hystmodal__opened {
    position: fixed;
    right: 0;
    left: 0;
    overflow: hidden;
}
.hystmodal__shadow {
    position: fixed;
    border: none;
    display: block;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 98;
    opacity: 0;
    transition: opacity 0.15s ease;
    background-color: black;
}
.hystmodal__shadow--show {
    pointer-events: auto;
    opacity: 0.6;
}
.hystmodal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    pointer-events: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    z-index: 99;
    visibility: hidden;
}
.hystmodal--active {
    opacity: 1;
}
.hystmodal--moved,
.hystmodal--active {
    pointer-events: auto;
    visibility: visible;
}
.hystmodal__wrap {
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
    min-height: 100%;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.hystmodal__window {
    margin: 50px 0;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0;
    background: #fff;
    width: 600px;
    max-width: 100%;
    overflow: visible;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
    transform: scale(0.9);
    opacity: 0;
}
.hystmodal--active .hystmodal__window {
    transform: scale(1);
    opacity: 1;
}
.hystmodal__close {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
    display: block;
    width: 35px;
    height: 35px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    border: none;
    font-size: 0;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z' fill='black'%3E%3C/path%3E%3C/svg%3E");
}
.hystmodal__styled.center {
    text-align: center;
}

.mod_image img {
    width: 80px;
    height: 80px;
    max-width: 100px;
}

.mod_image {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 30px;
}

@media all and (max-width: 767px) {
    .hystmodal__window {
        margin: 0;
    }
}
.mshow {
    display: none;
}
.wrapper {
    display: block;
    overflow: hidden;
}
.flexi {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}
.scr3,
.bluescr {
    background-color: #6b83a6;
    padding: 90px 0 60px;
}
.block-title--white {
    color: #fff;
}
.scr3__wrap {
    padding-top: 60px;
}
.demobuttons:hover {
    color: #6b83a6;
    background-color: #fff;
}
.demobuttons--min {
    display: flex;
    color: #6b83a6;
    background-color: #fff;
    margin: 60px auto 0;
    max-width: 240px;
}

.block-title {
    text-align: center;
    color: #fff;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 300;
}

.hystmodal__window {
    border-radius: 0;
    padding: 30px 30px;
}

.hystmodal__styled {
    font-size: 16px;
    line-height: 1.5;
}
.hystmodal__styled p {
    margin-bottom: 0.8em;
}
.hystmodal__styled a {
    color: #6b83a6;
}
.hystmodal__styled .h1 {
    font-size: 2em;
    margin-top: 15px;
    margin-bottom: 20px;
    color: #39537a;
}
.hystmodal__styled .h2 {
    font-size: 1.8em;
    margin-top: 15px;
    margin-bottom: 20px;
    color: #39537a;
}
.hystmodal__styled ul {
    margin-bottom: 0.8em;
}
.hystmodal__styled li {
    padding: 0.2em 0 0.2em 30px;
    position: relative;
    list-style: none;
}
.hystmodal__styled li:before {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #39537a;
    border-radius: 50%;
    top: 12px;
    left: 10px;
}
.hystmodal__styled img {
    display: block;
    margin-bottom: 0.8em;
}
.hystmodal__window--long {
    width: 1000px;
}
.s_mod_cont h3 {
    font-size: 24px;
    font-weight: 400;
}
.hystmodal--video .hystmodal__window {
    position: relative;
    width: 900px;
    padding: 0;
    height: 470px;
    box-sizing: content-box;
    background-color: #000;
}
.hystmodal--video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.hystmodal__window--form {
    width: 440px;
    max-width: 100%;
    background: linear-gradient(216.25deg, #ffffff 0%, #f3f3f3 100%), #fcfcfc;
    box-shadow: 0px 0px 6px rgba(51, 66, 94, 0.5);
    padding: 40px 30px;
}
.loginblock__h1 {
    margin-bottom: 30px;
    color: #2e3c56;
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
}
.loginblock__h2 {
    margin-top: 4px;
    color: #8f99aa;
    font-size: 14px;
    line-height: 21px;
}
.loginblock__form {
    padding-top: 36px;
}
.formitem {
    padding-bottom: 24px;
    position: relative;
}
.formitem input {
    outline: none;
    background: #ffffff;
    box-shadow: inset 0 0 0 100px #fff;
    border: 1px solid #dde0e6;
    box-sizing: border-box;
    color: #484c53;
    font-size: 15px;
    line-height: 26px;
    padding: 15px 20px;
    box-sizing: border-box;
    display: block;
    width: 100%;
}
.formitem input:focus {
    border-color: #9d9fa3;
}
.loginblock__bottom {
    justify-content: space-between;
    padding-bottom: 24px;
}
.formcheckbox {
    position: relative;
    display: block;
    cursor: pointer;
}
.formcheckbox input {
    position: absolute;
    /* visibility: hidden; */
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.formcheckbox:focus-within {
    outline: 2px dotted #afb3b9;
    outline-offset: 2px;
}
.formcheckbox input + span {
    height: 21px;
    color: #8f99aa;
    font-size: 12px;
    line-height: 21px;
    position: relative;
    align-items: center;
    user-select: none;
}
.formcheckbox input:checked + span {
    color: #2e3c56;
}
.checkplace {
    display: flex;
    background: #ffffff;
    border: 1px solid #dde0e6;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-right: 1rem;
}
.checkplace img {
    display: block;
    max-width: 90%;
    max-height: 95%;
    margin: auto;
    opacity: 0;
}
.formcheckbox input:checked + span .checkplace {
    border-color: #9d9fa3;
}
.formcheckbox input:checked + span .checkplace img {
    opacity: 1;
}
.loginblock__link {
    display: block;
    color: #2e3c56;
    font-size: 12px;
    line-height: 21px;
}
.formsubmit .button {
    width: 100%;
    height: 56px;
    font-weight: 500;
}

.fxied-el,
.fxied-el2 {
    display: block;
    position: fixed;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    background-color: #2e3c56;
    color: #fff;
    font-size: 14px;
}
.fxied-el2 {
    left: auto;
    top: auto;
    bottom: 30px;
    width: auto;
    padding: 10px;
    text-align: center;
    margin-right: 2rem;
    right: 30px;
}







/*
    Breadcrumbs
*/
.breadcrumbs {
  width: 100%;
  padding: 40px 0 20px 0;
}

.breadcrumbs__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #BBBBBB;
}

.breadcrumbs li svg {
  width: 13px;
  height: 13px;
}

.breadcrumbs li a {
  font-size: 15px;
  color: #BBBBBB;
  text-transform: capitalize;
  transition: color 0.24s linear;
}

.breadcrumbs li a:hover {
    color: #303030;
}







/*
    Almwaseem Page
*/
.almwa_scontent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    width: 100%;
}

.img_sonr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: 0.2s ease-in-out all;
}

a.askdj_f {
    padding: 25px;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
    box-shadow: 0px 6px 12px -6px #18274b0f;
    gap: 15px;
}

.alma_setitle {
    display: flex;
    justify-content: space-between;
}

.img_sonr {
    height: 300px;
    overflow: hidden;
}

a.askdj_f:hover .img_sonr img {
    transform: scale(1.1);
}

.alma_setitle h3 {
    font-size: 16px;
    font-weight: 400;
}

.plow_ds {
    display: flex;
    gap: 7px;
}

.kjsie__d {
    display: flex;
    flex-direction: column;
    gap: 6px;
}






/*
    Video Modal
*/
#lvideo-wrap {
  position: fixed;
  height: 100vh;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
}

#lvideo-wrap, #lvideo-wrap:after,
#lvideo-wrap .lvideo-overlay {
  left: 0;
  top: 0;
  width: 100%;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}

#lvideo-wrap:after,
#lvideo-wrap .lvideo-overlay {
  height: 100%;
  position: absolute;
  background: #fff;
}

#lvideo-wrap:after {
  content: "";
  display: block;
  opacity: 0;
  z-index: -1;
}

#lvideo-wrap .lvideo-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  flex-direction: column;
  padding-top: 0px;
  gap: 15px;
}

#lvideo-wrap video, #lvideo-wrap iframe {
  position: relative;
  box-sizing: border-box;
  background-color: #000;
  z-index: 10;
  display: block;
  max-width: 1280px;
  height: auto;
  width: 90%;
  aspect-ratio: 1.7777777778;
}

#lvideo-wrap video {
  object-fit: cover;
}

h3.vid_tit_from_block {
    font-weight: 300;
    font-size: 18px;
}

#lvideo-wrap .lvideo-close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  transition: all 0.3s ease-in-out;
}

#lvideo-wrap.active {
  opacity: 1;
  visibility: visible;
}

#lvideo-wrap.active:after {
  opacity: 0.5;
}

body.lvideo-active {
    overflow: hidden;
}

.video_title_close {
    display: flex;
    width: 90%;
    max-width: 1260px;
    align-items: center;
    justify-content: space-between;
}

.ldkfo_r {
    background: #F8F8F8;
    padding: 18px 70px;
    display: block;
    float: none;
    width: fit-content;
    margin: 10px auto 60px;
    font-size: 20px;
}



/*added by kholoud*/
.icon {
  z-index: 9;
  position: absolute;
  width: 35px;
  height: 35px;
  transform: translate(-50%, -50%);
  background-image: url('../img/heart_bar.svg');
  background-size: contain;
  background-repeat: no-repeat;
  fill: #0078C5;
}

.label-content {
    display: flex;
    align-items: center;
    direction:ltr;
}

.label-content img {
    width: 24px; /* Adjust icon size as needed */
    height: 24px; /* Adjust icon size as needed */
    margin-right: 10px; /* Space between icon and text */
}
/*added by kholoud*/





/*
    Gifts
*/
.llse_osekf {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 70px 15px 70px;
    margin-bottom: 5.6rem;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
    font-size: 19px;
}

.sing_gift {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 0.9rem;
    position: relative;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s ease-out;
    transform: scale(0.95);
}

.gift_form_risid {
    box-shadow: 0px 6px 12px -6px #18274b0f;
    background: #f8f8f8;
    padding: 50px 50px;
    position: relative;
    border-radius: 2px;
}

.gist_slkje_dcont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0px;
    margin: 0 auto;
}

#giftForm label {
    display: block;
    margin-bottom: 10px;
    font-size: 17px;
}

#giftForm .skie_fli label {
    margin: 0;
}

.fm_g {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
}

[type="text"], [type="tel"], [type="date"], [type="email"], textarea, #totalCountAmount {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 7px 12px;
    height: 40px;
    background: #FFFFFF;
    opacity: 0.8;
    border: 1.5px solid #C6C6C6;
    border-radius: 4px;
}

#giftForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.send_copy_sta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0078C5;
    margin-top: 12px;
}

#giftForm .send_copy_sta label {
    margin: 0;
    font-size: 14px;
    cursor: pointer;
}

#giftForm input#amount {
    padding: 0;
    height: 38px;
    max-width: 100%;
}

#giftForm .oi {
    display: flex;
    padding: 0 15px 0 15px;
}

#giftForm .oi label {
    margin: 0;
}

#submit_gift {
    position: relative;
    display: inline-block;
    height: 44px;
    min-width: 150px;
    font-size: 16px;
    width: 100%;
    font-weight: 300;
    border-radius: 4px;
    background: #0078C5;
    color: #fff;
    cursor: pointer;
}

.subm_frm_tr {
    display: flex;
    flex-direction: row;
    gap: 13px;
}

.crd_imbg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 0;
}

.gift_slider_lesi {
    padding: 0px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
    margin: auto;
}

.bg_selimg {
    cursor: pointer;
}

/*.card_content_b {
    background-image: url(../img/background-with-christmas-gifts-box-template_135149-78.jpg);
    width: 100%;
    height: -webkit-fill-available;
    min-height: 590px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    padding: 90px 70px 50px 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    padding-bottom: 60px;
    gap: 20px;
}*/
.card_content_b {
    background-image: url(../img/gifts/temp1.svg);
    width: 100%;
    height: -webkit-fill-available;
    min-height: 560px;
    background-repeat: no-repeat;
    background-position: right top;
    /*background-size: cover;*/
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 200px;
    gap: 20px;
}

/*.card_sont_text {
    max-width: 95%;
    font-size: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}*/
.card_sont_text {
    max-width: 80%;
    font-size: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

#sender_nme {
    font-size: 22px;
    font-weight: 400;
    margin-top: 15px;
}

.sing_gift.active {
    background: #f8f8f8;
    transform: scale(1);
    color: #1679c2;
    font-weight: 400;
}

.gift_img, .gift_img img {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sing_gift:hover {
    background: #f8f8f8;
    color: #1679c2;
}

.card_content_b {
    transition: background-image 0.4s ease-in-out;
}

section.gift_frm_slider span.or_add_custom {
    padding: 0;
}




/*
    GAZA
*/
.gaza_spe .cut_skjefnt {
    padding-right: 0px;
}

.gaza_spe .donate_now_btn_sli {
    display: block;
    z-index: 99;
    margin-top: 40px;
}

.cut_troud_gaza .se_smll_setit {
    padding-bottom: 20px !important;
}

.cut_troud_gaza {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.cut_troud_gaza .frm_group .lkdor__ds {
    gap: 12px;
}

.cut_troud_gaza .asldor__se {
    margin-top: 15px;
}

.gaza_cust_pa .project_cont_img_desc_coll.sing_project {
    margin: 0;
}

.gaza_cust_pa .asdn_dsiue .amoun_skdjir {
    height: 100%;
}

.gaza_cust_pa .asldjir__sdke {
    margin-bottom: 40px;
}





/*
    + & -
*/
.amo_contr {
    display: flex;
    gap: 15px;
}

.cou_trs .quantity {
    height: 44px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 0px;
    width: 100%;
    text-align: center;
}

.cou_trs {
    display: flex;
    width: 100%;
    max-width: 96px;
    align-items: center;
    justify-content: center;
}

.cou_trs .quantity a {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #f2f7fb;
    border: 1px solid #b1c3cf;
    border-radius: 5px;
}

.amo_contr .oi {
    width: calc(100% - 108px);
}

a.btn-inc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z'/%3E%3C/svg%3E");
}

a.btn-sub {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h16v2H4z'/%3E%3C/svg%3E");
}

.cou_trs .quantity a:hover {
    background-color: #e2ecf3;
}

button.minus_sct {
    border-radius: 5px 0 0 5px;
}

button.plus_sct {
    border-radius: 0 5px 5px 0;
}


/*
    Responsive
*/
@media (max-width: 1700px) {
    .container {
        max-width: 1440px;
    }
}

@media(max-width: 1600px) {
  .dropdown-content.with_icons a {
    min-width: auto;
    font-size: 15px;
    font-weight: 400;
  }
}

@media (max-width: 1500px) {
    .container {
        max-width: 1300px;
    }

    input#amount {
        max-width: 100px;
    }

    .splide__slide {
        height: 560px;
    }

    .skjdie__dcor {
        grid-column-gap: 40px;
        grid-row-gap: 50px;
    }
    
}

@media(max-width: 1400px) {
    .left_side_amount_se {
        gap: 25px    
    }
    
    .sing_proj_descsm {
        font-size: 18px;
    }
    
    .asdn_dsiue {
        grid-column-gap: 25px;
        grid-row-gap: 25px;
    }
    
    .project_cont_img_desc_coll {
        margin-bottom: 20px;
        padding: 40px;
    }
    
    .sing_proj_descsm {
        font-size: 18px;
    }
    
    .ttal_sa h1 {
        font-size: 18px;
    }
    
    .ttal_sa h3 {
        font-size: 30px;
    }
    
    .askjr__fhy {
        gap: 5px;
    }
    
    .project_cont_img_desc_coll {
        padding: 45px;
    }
    
    .project_cont_img_desc_coll .prj_nme h3 {
        font-size: 29px;
    }
    
    .amoun_skdjir, .collected_amount, .project_cont_img_desc_coll, .oirkt_d, .oike_de {
        padding: 40px 50px;
    }
    
    .ttal_sa h1 {
        font-size: 17px;
    }
    
    .ttal_sa h3 {
        font-size: 25px;
        font-weight: 400;
    }

    .project_cont_img_desc_coll .prj_nme h3 {
        font-size: 30px;
    }
    
    .project_cont_img_desc_coll {
        padding-top: 40px;
    }
    
}

@media (max-width: 1350px) {
    .sa_bloc_con {
        width: 200px;
        height: 300px;
        padding: 20px 0 20px 0;
    }
    
    span.kfala_nme {
        font-size: 17px;
    }
    
    .block_sing_cost {
        font-size: 13px;
    }
    
    span.kfala_amount {
        font-size: 19px;
    }
    
    .prj_nme h3 {
        font-size: 20px;
        font-weight: 400;
    }
    
    .sing_prj_head {
        padding: 10px 20px;
    }
    
    .sing_prj_details {
        font-size: 17px;
    }

    .splide__slide {
        height: 490px;
    }
    
    .container {
        max-width: 1200px;
    }
    
    input#amount {
        max-width: 86px;
    }

    form.nml_not input[type="submit"] {
        padding: 8px 5px;
    }

    .dropdown-content.with_icons a {
        padding: 20px 25px;
    }
        
    a.log_sjhe {
        padding: 13px 6px;
        white-space: nowrap;
    }
    
    .lang_curre_cart {
        gap: 15px;
    }
    
    .menu_se a {
        font-weight: 400;
        white-space: nowrap;
        padding: 30px 9px;
    }
    
    a.fr.aqm {
        max-width: 110px;
        height: 51px;
    }
    
    .right_cont {
        gap: 20px;
    }
    
    a.se_ch {
        width: 40px;
        height: 40px;
    }
    
    .left_sid_cont {
        gap: 50px;
    }
    
    .skjdie__dcor {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1300px) {
    .llse_osekf {
        padding: 0;
        margin-bottom: 30px;
    }

    .gift_img, .gift_img img {
        width: 100px;
        height: 100px;
    }

    .sing_gift {
        font-size: 18px;
        padding: 5px 0 20px 0;
    }

    .skje__dkoemor {
        grid-column-gap: 15px;
    }
    
    .a_inf {
        height: 45px;
    }
    
    .cust_stic svg {
        max-width: 85px;
    }
    
    .asdn_dsiue {
        grid-template-columns: 2fr 1fr;
    }

    .asdn_dsiue.troud_cust {
        grid-template-columns: 2fr 2fr;
   }
   
    .asdn_dsiue.troud_cust .sing_project {
        gap: 14px;
        padding: 30px 40px;
    }
    
    .asldor__se {
        display: flex;
        flex-direction: column;
    }
    
    .ssldk_gift {
        border: 0;
    }
    
    .oirkt_d {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }
    
    .oirkt_d .sdkjiirr_dse:last-child .ttal_sa {
        display: block;
    }

    .oirkt_d .ttal_sa {
        gap: 2px;
    }
    
    .oirkt_d .sdkjiirr_dse:first-child {
        border-right: 1.5px solid #000;
        padding-right: 20px;
    }
    
    .card_content_b {
        transition: background-image 0.4s ease-in-out;
        min-height: 630px;
    }
    
    .fm_g {
        grid-template-columns: 1fr;
    }
    
    .gist_slkje_dcont {
        grid-template-columns: 1fr 2fr;
        grid-column-gap: 20px;
    }
    
    .gift_form_risid {
        padding: 50px 35px;
    }
    
    .gift_slider_lesi {
        padding: 0;
    }

}

@media(max-width: 1250px) {
    .skie_fli {
        display: flex;
        flex-direction: column;
    }
    
    .skie_fli label:last-child {
        max-width: 100%;
    }

    .zak_container {
        max-width: 100%;
    }

    .ab_gh_conrt {
        grid-column-gap: 50px;
    }

    .kjs__ddjiw_d, .block_sje__wr {
        font-size: 17px;
    }
    
    .asl_conta h2 {
        font-size: 40px;
    }

    .ab_gh_conrt {
        grid-column-gap: 50px;
    }

    .block_sje__wr h3 {
        font-size: 27px;
    }

    .proj_blocks {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .container {
        max-width: 1050px;
    }
    
    .sing_prj_img {
        height: 260px;
    }
    
    .sec_tit h2 {
        font-size: 26px;
    }
    
    .blocks_links {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .s_tit_s {
        font-size: 20px;
    }

    .ksdj_sde h3 {
        font-size: 50px;
        font-weight: 500;
    }
    
    .ksdj_sde {
        font-size: 18px;
    }
    
    .ftr_menu a {
        padding: 10px;
        font-size: 15px;
    }
    
    .social_se {
        font-size: 15px;
        gap: 15px;
    }
    
    .content_cta {
        padding: 130px 0;
    }
    
    .skjdie__dcor {
        grid-template-columns: repeat(3, 1fr);
    }

    .sing_sol_tit {
        font-size: 17px;
    }
}

@media (max-width: 1200px) {
    .images_fch {
        transform: translate(-50px, 0px);
    }

    ul.partners li {
        width: 33%;
        padding: 10px 0;
        gap: 20px;
    }
    
    ul.partners li h3 {
        font-size: 18px;
    }
    
    ul.partners li img {
        max-width: 230px;
        /*max-height: 73px;*/
    }
    
    ul.partners li:after {
        height: 60%;
    }
    
    section.ghaith_partners {
        padding: 50px 0 5px 0;
    }
   
    .kjs_sub_all {
        width: fit-content;
    }
    
    .fst_sec_cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }
            
    .blc_bg {
        right: 130px;
        max-width: 100%;
        bottom: auto;
        height: 410px;
        background-size: 100%;
        background-position: center;
    }
        
    .kfalatcontent {
        max-width: 100%;
    }
    
    .tabs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
        
    .btm_blocks {
        overflow-x: scroll;
         -webkit-overflow-scrolling: touch;
         gap: 22px;
    }
    
    .llse_osekf {
        padding: 10px 0px 15px 0px;
        margin-bottom: 20px;
    }

    .askjei_sserf {
        max-width: 460px;
    }
    
    .cut_skjefnt {
        font-size: 100px;
        margin: 0;
        padding-left: 10px;
    }

    .ske_ooelr h3 {
        line-height: 100%;
        font-size: 65px;
    }

    .skj_subcont {
        margin-top: 8px;
        font-size: 18px;
    }

    .sllae_pse_dgh {
        font-size: 20px;
    }

    .ske_ooelr {
        height: 70px;
    }

    .skjie_sub_conte {
        max-width: 80%;
    }
    
    span.num_blc {
        right: 10px;
        top: 3px;
        font-size: 31px;
    }
    
    .pg_descrip.sort_inc {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .controls {
        gap: 15px;
        display: flex;
        flex-wrap: wrap;
    }

    nav.gha_he {
        display: none;
    }

    .mobile_nav {
        display: flex;
        height: 60px;
    }

    button.splide__pagination__page {
        width: 50px;
        height: 3px;
    }

    button.splide__pagination__page.is-active:before {
        height: 3px
    }

    .almwa_scontent {
        grid-template-columns: repeat(2, 1fr);
    }

    .asdn_dsiue {
        gap: 20px;
    }

    .image_dkjei_fluid {
        width: 650px;
    }

    .amoun_skdjir {
        width: -webkit-fill-available;
    }

    .modal {
        top: 14px;
    }

    ul#userDetailsList {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

}

@media(max-width: 1100px) {
    .lks_zak_tit h3, .tot_btit h3 {
        font-size: 21px;
    }

    .bd_g {
        padding: 40px 40px 45px 40px;
    }

    .right_si_conskje {
        gap: 20px;
    }

    .oioir_dse {
        grid-column-gap: 20px;
    }

    .container {
        max-width: 970px;
    }
    
    .asdm_numb {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .content_cta {
        padding: 100px 0;
    }
    
    .slkd__De h3 {
        font-size: 25px;
    }
    
    .slkd__De span {
        font-size: 18px;
    }
    
    a.btn.def_btn {
        font-size: 17px;
        max-width: 210px;
    }
    
    .splide__slide {
        height: 420px;
    }

    .h_q.cus_dkoe {
        font-size: 34px;
    }

    .skjde_right {
        padding: 40px;
    }
    
    .total_amount_skj,
    .askdjir_d {
        padding: 30px;
    }
    
    span.tra_tit {
        font-size: 20px;
    }
    
    .submit_sva button,
    #openBankModalBtn {
        font-size: 17px;
    }
    
    .blc_tit {
        padding-bottom: 20px;
        font-size: 18px;
    }
    
    .skjde_right label {
        font-size: 16px;
    }

    .vertical-tabs.active {
        display: none;
    }
    
    .vertical-tabs {
        width: 100%;
        max-width: 100%;
    }
    
    .ksjdie_dkjse_se {
        display: flex;
        flex-direction: row;
        max-width: 100%;
    }
    
    .tab {
        border: 0;
    }
    
    #tabContent {
        width: 100%;
        display: none;
    }
    
    .current_tab {
        display: block !important;
    }

    button#toggleTabs {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        gap: 9px;
        visibility: hidden;
        font-size: 18px;
    }

    button.active {
        visibility: visible !important;
    }

    .tab::after, .tab.active:after {
        background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.0998 5L5.5498 8.45L4.4998 9.5L-0.000195503 5L4.4998 0.5L5.5498 1.55L2.0998 5Z' fill='black'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center center;
        background-color: transparent !important;
        background-size: 8px;
        width: 10px;
        left: 20px;
    }

    .bloc_secont_cen h3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
    }
}

@media(max-width: 1000px) {
    .tabs {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .accordion-header {
        padding: 12px 0 12px 0;
    }

    .ab_gh_conrt {
        grid-column-gap: 50px;
    }

    .ab_gh_conrt {
        grid-template-columns: 1fr;
        grid-row-gap: 40px;
    }

    .skjie_fkelll_a {
        gap: 30px;
    }

    .ab_gh_cospoe {
        margin-top: 50px;
    }
    
    .accordion-header h3 {
        font-size: 16px;
        font-weight: 400;
    }

    .accordion-content p {
        padding: 17px 0px;
        font-size: 16px;
    }

    .sing_gift {
        width: 142px;
    }

    .llse_osekf {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .container {
        max-width: 900px;
    }
    
    .gist_slkje_dcont {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 30px;
    }
    
    .fm_g {
        grid-template-columns: 1fr 1fr;
    }
    
    .skie_fli {
        display: flex;
        flex-direction: row;
    }
}
    
@media(max-width: 950px) {
    .skie_fli {
        display: flex;
        flex-direction: row;
    }
    
    .proj_blocks {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .container {
        max-width: 760px;
    }
    
    .ksmd_ddlks {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .fst_ftr {
        height: auto;
        padding: 24px 0;
    }
    
    .copyrights {
        font-size: 15px;
        height: 61px;
    }

    .img_sonr {
        height: 240px;
    }

    .asdn_dsiue {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .image_dkjei_fluid {
        width: 100%;
        max-height: 380px;
    }

    .amoun_skdjir {
        padding: 40px 60px 50px 60px;
    }

    .mu_lti_skde {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    .half {
        grid-column-gap: 20px;
    }

    .cart_empty_dcont span {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .lksd_dkjeir h1 {
        font-size: 30px;
    }
    
    .cart_empty_dcont {
        gap: 25px;
    }
    
    .svg_icn svg {
        width: 120px;
        height: 120px;
    }

    h2#tal_amount {
        font-size: 30px;
    }
    
    .car_co_ekjir {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .asdn_dsiue {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    
    .project_cont_img_desc_coll {
        margin-bottom: 25px;
    }
    
    .asldor__se {
        display: flex;
        flex-direction: row;
    }
    
    .collected_amount {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 130px;
    }
    
    .sakdjir__skje {
        border: 0;
    }
    
    .ttal_sa {
        display: flex;
        align-items: flex-start;
    }

    .si_blco_s {
        padding: 50px 15px 50px 15px;
    }

    .cust_stic {
        margin-top: 25px;
    }

    .askjei_sserf {
        max-width: 400px;
        display: flex;
        align-items: flex-end;
        text-align: right;
    }

    .sllae_pse_dgh > span:last-child {
        display: none;
    }

    .sllae_pse_dgh {
        margin: 7px 0 12px 0;
    }

    .cut_skjefnt {
        text-align: center;
        font-size: 90px;
        padding-right: 0;
    }

    .ske_ooelr h3 {
        font-size: 50px;
    }

    .ske_ooelr {
        height: 50px;
        gap: 12px;
    }

    .oioir_dse {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .right_si_conskje {
        gap: 25px;
    }

    .close_selected_one {
        left: 10px;
        right: auto;
        top: 10px;
    }

}

@media(max-width: 825px) {
    .sdk_con_bloc {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }

}

@media(max-width: 800px) {
    #zakat_type_se, #zakat_hawl_se {
        grid-template-columns: repeat(2, 1fr);
    }

    .gift_img, .gift_img img {
        width: 85px;
        height: 85px;
    }

    #giftForm label {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .sing_gift {
        gap: 3px;
        padding: 10px 0 20px 0;
    }

    .h_q.cus_dkoe {
        font-size: 25px;
    }
    
    .sec_tit h2 {
        font-size: 22px;
    }
    
    .prj_nme h3 {
        font-size: 17px;
    }
    
    .container {
        max-width: 680px;
    }
    
    .oi label {
        font-size: 14px;
    }

    .sing_sol_icn {
        width: 90px;
        height: 90px;
        padding: 15px;
    }

    span.lkode__f {
        font-size: 17px;
    }
    
    .sloe_esd h3 {
        font-size: 23px;
        line-height: 24px;
    }
    
    .progress-bar svg {
        width: 30px;
        height: 39px;
        top: -11px;
    }

    section.slkoe_clsec_blocks {
        background-position: center center;
    }

    .tabs {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }

    ul.partners {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    ul.partners li:after {
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        bottom: 0;
        top: auto;
        max-width: 70%;
        background: #dadada;
    }
    
    ul.partners li h3 {
        font-size: 22px;
    }
    
    ul.partners li img {
        max-width: 230px;
        /*max-height: 110px;*/
    }
    
    ul.partners li {
        width: 100%;
        padding: 60px 0;
    }
    
    ul.partners li:first-child {
        padding-top: 10px;
        padding-bottom: 30px;
    }
    
    ul.partners li:last-child {
        padding-bottom: 10px;
    }
    
    section.ghaith_partners {
        padding: 50px 0 30px 0;
    }

}

@media(max-width: 700px) {
    .multi-steps > li {
        font-size: 15px;
    }

    .multi-steps > li:before {
        width: 40px;
        height: 40px;
    }

    .multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
        font-size: 18px;
    }

    #zakat_type_se, #zakat_hawl_se {
        grid-template-columns: repeat(2, 1fr);
    }

    .bd_g {
        padding: 35px 30px 35px 30px;
        box-shadow: none;
    }

    .na_step {
        gap: 12px;
    }

    .right_si_conskje {
        gap: 20px;
    }

    .askjei_sserf {
        gap: 6px;
        padding-top: 18px;
        max-width: 92%;
    }

    .sllae_pse_dgh {
        margin: 13px 0 17px 0;
        gap: 14px;
    }

    a.don_nowsli {
        padding: 8px 60px;
        height: 40px;
    }

    .skj_subcont {
        margin-top: 10px;
        font-size: 17px;
        line-height: 24px;
    }

    .container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .s_do_desc {
        font-size: 14px;
    }

    .s_tit_s {
        font-size: 17px;
    }

    a.si_opp {
        height: 100%;
    }

    .skdu_de {
        padding: 12px 20px;
    }

    .modal_header h3 {
        font-size: 28px;
    }

    .skie_fli label {
        padding: 10px 0;
        max-width: 100%;
    }

    .almwa_scontent {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .skjdie__dcor {
        grid-template-columns: repeat(2, 1fr);
    }

    .image_dkjei_fluid {
        height: 300px;
    }

    .se_smll_setit h3 {
        font-size: 27px;
    }

    .se_smll_setit {
        font-size: 19px;
    }

    .lkdor__ds p.text-muted {
        font-size: 17px;
    }

    .pg_descrip.sort_inc .sort {
        width: 100%;
    }

    .controls {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }

    .pg_descrip.sort_inc {
        margin-bottom: 50px;
    }

    .project_cont_img_desc_coll {
        padding: 30px 30px;
    }

    .project_cont_img_desc_coll .image_dkjei_fluid {
        height: 310px;
        margin-bottom: 20px;
    }

    .collected_amount {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .ttal_sa {
        display: flex;
        align-items: center;
    }

    .ttal_sa h1 {
        font-size: 20px;
    }

    .sdkj_dkjr_fd {
        display: flex;
        flex-direction: column;
    }

    .asldor__se a {
        padding: 12px 20px;
    }

    .asdn_dsiue .amoun_skdjir {
        padding: 40px 40px 40px 40px;
    }

    .slkje_de svg {
        width: 40px;
        height: 57px;
    }

    .kjd_bltit {
        gap: 15px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    h2.he_titcent {
        font-weight: 400;
        font-size: 22px;
    }

    .l_frm_s label {
        font-size: 18px;
    }

    .askjdi_logn {
        padding: 40px 50px 60px 50px;
    }

    .sing_donat_aseg {
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 30px;
        padding: 25px 30px;
    }

    .skje__dkoemor {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    
    .si_blco_s {
        padding: 50px 20px 50px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .page_content_sing p {
        padding: 20px 15px;
        font-size: 16px;
    }

}

@media(max-width: 650px) {
.skje__pe_conbef {
    height: 100%;
}

.slider_content_slop {
    top: 0;
    bottom: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .fst_sec_cont {
        display: block;
    }

    .sam_im {
        height: fit-content;
    }
    
    #kafalah {
        width: 100%;
    }

    #kafalah .sa_bloc_con {
        width: 100%;
    }

    .sam_im img {
        width: 100%;
        transform: scale(0.8);
    }
    
    .btm_blocks {
        margin-top: 40px;
    }
    
    .sa_bloc_con .amount input.amountInput {
        font-size: 30px;
        max-width: 60px;
    }
    
    .images_fch {
        margin-bottom: 40px;
        height: 380px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 443px;
        transform: translate(0px, 0px);
    }

    #donateLink svg {
        width: 17px;
        height: 17px;
    }

    #donateLink {
        max-width: 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        white-space: pre;
        height: 100%;
        max-height: 130px;
        gap: 40px;
        align-items: center;
    }

    #donateLink span {
        transform: rotate(90deg);
    }
    
    .fm_g {
        grid-template-columns: 1fr;
    }

    .skie_fli {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .troud_cust .skie_fli {
        display: flex;
       flex-direction: column;
    }
    
    .skdu_de {
        padding: 5px 25px;
    }
    
    .modal {
        top: 0;
    }

    .llse_osekf {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        padding-bottom: 0;
    }

    .sing_gift {
        width: 100%;
    }

    .card_content_b {
        padding: 60px !important;
        min-height: 530px !important;
    }

    .card_sont_text {
        font-size: 19px !important;
    }

    .crd_imbg {
        grid-column-gap: 12px;
    }

    .gift_slider_lesi {
        gap: 12px;
    }

.skie_fli label:last-child {
        max-width: 100%;
} 
}

@media(max-width: 600px) {
    .gr_csin {
        display: flex;
        flex-direction: column;
    }
    
    .sa_bloc_con img {
        width: 60px;
        height: auto;
    }
    
    .half {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    
    .skjde_right form {
        gap: 22px;
    }

    .svg_icn svg {
        width: 100px;
        height: 100px;
    }
    
    .lksd_dkjeir h1 {
        font-size: 25px;
    }
    
    .cart_empty_dcont span {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .donat_csing {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 25px;
    }
    
    .donat_csing .sing_prj_payment {
        padding: 0;
        width: 100%;
        gap: 10px;
        flex-direction: row;
    }
    
    .donat_csing form.nml_not input#amount {
        max-width: inherit;
        width: 100%;
    }
    
    .donat_csing form.nml_not .oi {
        width: 100%;
    }

    #dawry_pa .project_cont_img_desc_coll {
        padding: 0;
    }

    .sing_donat_aseg {
        grid-template-columns: 1fr 1fr;
    }
    
    ul.progress {
        margin-top: 0;
    }

    p.progress__info {
        font-size: 17px;
        font-weight: 500;
    }

    .progress__item:after {
        width: 40px;
        height: 40px;
    }

    .progress__item:before {
        top: 40px;
        height: 81%;
        right: -44px;
    }

    .a_inf svg {
        width: 20px;
        height: 20px;
    }
    
    .a_inf {
        height: 40px;
    }
    
    .skje__skje_desc {
        margin-top: 12px;
        padding-top: 15px;
    }

    .tabs {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }

    .kf_tab {
        font-size: 15px;
        padding: 10px 0px;
    }

}

@media(max-width: 500px) {
    .card_content_b {
        min-height: 430px !important;
    }
    
    #sender_nme {
        font-size: 17px;
    }
    
    .zak_container {
        margin-top: 40px;
    }

    .multi-steps > li {
        font-size: 14px;
        line-height: 19px;
    }

    .multi-steps > li:before {
        width: 36px;
        height: 36px;
        background-size: 15px;
    }

    .multi-steps > li:after {
        top: 20px;
    }

    .multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
        font-size: 17px;
        line-height: 37px;
    }

    .zak_container {
        margin-top: 40px;
    }

    #zakat_type_se, #zakat_hawl_se {
        grid-template-columns: 1fr;
        grid-row-gap: 10px;
    }

    .kksje_sel_a {
        font-size: 18px;
    }
    
    .skie_fli {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }

    .img_sonr {
        height: auto;
        max-height: 320px;
    }

    a.askdj_f {
        padding: 20px;
    }

    .amoun_skdjir {
        padding: 40px 40px 50px 40px;
    }

    .modal {
        top: 0;
    }

    .project_cont_img_desc_coll .prj_nme h3 {
        font-size: 25px;
    }

    .project_cont_img_desc_coll .sing_prj_head {
        padding: 10px 20px;
    }

    .sing_proj_descsm {
        padding: 0 22px;
        font-size: 17px;
        line-height: 24px;
    }

    .asldor__se a {
        padding: 12px 0px;
    }

    .asdn_dsiue .amoun_skdjir {
        padding: 30px 30px 20px 30px;
    }

    .asldor__se {
        gap: 40px;
    }

    .amo_contr {
        gap: 10px;
    }
    
    .cou_trs .quantity {
        grid-column-gap: 5px;
    }
    
    .oi label {
        display: none;
    }
    
    .lkdor__ds .sing_prj_payment input.amount {
        text-align: center;
    }

    .amoun_skdjir, .collected_amount, .project_cont_img_desc_coll, .oirkt_d, .oike_de {
        padding: 40px;
    }

    .oike_de {
        gap: 24px;
    }

    .project_cont_img_desc_coll {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 25px;
    }

    .askjdi_logn {
        padding: 40px 30px 50px 30px;
    }

    .sing_donat_aseg {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 25px;
    }

    .segel_fl h3 {
        padding-right: 0;
        font-size: 17px;
    }

    .sdk_con_bloc {
        grid-template-columns: 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }

    #account {
        padding: 50px 30px;
    }

    .avatar-upload .avatar-edit input + label {
        width: 35px;
        height: 35px;
    }

    .avatar-upload .avatar-edit svg {
        width: 16px;
        height: 16px;
    }

    .avatar-upload .avatar-edit {
        left: 4px;
        bottom: 4px;
    }

    .skjie_sub_conte {
        max-width: 100%;
        font-size: 17px;
    }

    section.slkoe_clsec_blocks {
        padding: 30px 0;
    }

    #res_lkoe_fpas {
        grid-column-gap: 12px;
    }

    .aslke_date_bi {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .skjd_img {
        height: 270px;
    }
    
    .ab_gh_conrt {
        grid-row-gap: 20px;
    }
    
}

@media(max-width: 450px) {
    .card_content_b {
        min-height: 390px !important;
        padding: 60px 40px 0px 40px !important;
    }
    
    .card_sont_text {
        font-size: 16px !important;
    }
    
    #sender_nme {
        font-size: 15px;
    }
        
    .images_fch {
        height: 310px;
        width: 100%;
    }
    
    .sam_im img {
        transform: scale(0.90);
    }
    
    .page_content_sing {
        padding: 0;
        box-shadow: none;
    }

    .page_content_sing p {
        padding: 20px 5px;
    }

    .social_se {
        display: flex;
        flex-direction: column;
    }

    .sci_icons a {
        width: 40px;
    }
    
    .splide__pagination__page.is-active {
        width: 100px;
    }
    
    .sing_prj_payment {
        display: flex;
        flex-direction: column;
    }
    
    span.div_ay svg {
        width: 8px;
    }

    .sing_prj_head {
        padding: 6px 16px;
    }

    .shareButton, .shareButton.open {
        width: 20px;
        height: 20px;
    }

    .shareButton svg, .shareButton.open svg {
        width: 20px;
        height: 20px;
    }

    .prj_nme h3 {
        font-size: 15px;
    }

    .sing_prj_details {
        font-size: 15px;
    }

    .sec_tit {
        padding-bottom: 20px;
    }

    .sec_tit h2 {
        font-size: 20px;
    }

    section.donation_opportunities {
        padding: 30px 0;
    }

    .skie_fli {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .modal .modal-content {
        padding-bottom: 20px;
    }

    .blocks_links {
        grid-template-columns: repeat(1, 1fr);
    }

    .ksdj_sde h3 {
        font-size: 37px;
        font-weight: 300;
        line-height: normal;
    }

    .ksdj_sde {
        height: 180px;
        font-size: 16px;
    }

    .asdm_numb {
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }    

    section.dona_numbers {
        padding-top: 20px ;
    }

    .skjdie__dcor {
        grid-template-columns: repeat(1, 1fr);
    }

    .asldor__se {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .asldor__se a {
        width: 100%;
    }

    .ssldk_remessage, .ssldk_gift {
        width: 100%;
    }

    #res_lkoe_fpas {
        grid-template-columns: 1fr;
        grid-row-gap: 17px;
   }

    .sllae_pse_dgh strong {
        font-weight: 400;
        font-size: 18px;
    }

    .sllae_pse_dgh {
        margin: 8px 0 11px 0;
    }

    .ske_ooelr {
        height: 40px;
    }

    .cut_skjefnt {
        font-size: 62px;
        padding-right: 0;
    }

    .ske_ooelr h3 {
        font-size: 38px;
    }

}

@media(max-width: 425px) {
    .skjd_join_us_frm {
        padding: 30px 20px;
    }

    .card_content_b {
        min-height: 357px !important;
        padding: 20px 30px 0px 30px !important;
    }
    
    .card_sont_text {
        font-size: 13px !important;
    }
    
    #sender_nme {
        margin-top: 0;
    }

    ul.partners li h3 {
        font-size: 17px;
    }

    ul.partners li img {
        max-width: 160px;
        /*max-height: 100px;*/
    }

    ul.partners li {
        padding: 45px 0;
    }
}

.multi-steps > li:after {
    right: 50%;
    left: auto;
}

.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
    font-weight: 500;
}

.ttal_sa h1 {
    font-weight: 600;
}

.sdkjiirr_dse {
    /*border-left: 1.5px solid #000;
    padding-left: 20px;
    border-right: 0;
    padding-right: 0;*/
      border-right: 1.5px solid #000;
    padding-right: 20px;

}

.askjr__fhy {
    gap: 10px;
}

.pie:after {
    font-size: 22px;
    content: attr(data-percentage) '%';
}

.sakdjir__skje {
    border-left: 1.5px solid #000;
    padding-left:20px;
    border-right: 0;
}

.sing_proj_descsm {
    font-size: 18px;
}

.oi label {
    color: #959595 !important;
    font-weight: 400;
}

.goToCart {
    font-weight: 500;
}

/*
    Update CSS
*/
#qalby_itm a {
    min-width: 130px;
    position: relative;
    padding: 20px 20px;
}

.with_icons span.small_sub {
    background: #1679c2;
    font-size: 12px !important;
    color: #fff !important;
    padding: 0 8px;
    border-radius: 12px;
    display: block;
    position: absolute;
    bottom: 43px;
    line-height: 18px !important;
}

.lang_cu .dropdown-select {
    padding-left: 50px;
}

ul#main-menu li a {
    padding: 15px 0;
    font-size: 16px;
}

.toggle-item span {
    font-size: 15px;
}

.side_donation {
    z-index: 999;
}

.close_curr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E%0A");
    width: 22px;
    height: 22px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
}

.toggle-item.currency.active svg {
    display: none;
}

#currencydropdownmobile {
    max-height: 445px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 0;
}

ul.options li a {
    padding: 7px 0;
    font-size: 15px;
}

.menu-container .toggle-section {
    margin-top: 20px;
}

.menu-container.etlaa_bara {
    padding: 1.7rem;
    padding-bottom: 0;
}

body.active_fast_donation,
body.mobile_menu_act {
    overflow: hidden;
}

.act_fst_don {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #262626;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.4;
}


@media(max-width: 750px) {
    .side_donation {
        top: 110px;
    }

    #toggleLink:hover {
        opacity: 1;
    }

    .sing_sol_icn {
        width: 70px;
        height: 70px;
        padding: 11px;
        margin-bottom: 6px;
    }

    a.donate_now {
        font-size: 16px;
    }

    .sing_sol_tit {
        width: 100%;
        font-size: 17px;
    }

    .sig_solu:after {
        max-height: 170px;
    }

    .pg_descrip {
        margin-bottom: 30px;
        font-size: 16px;
    }

    .skjdie__dcor {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 40px;
    }

    .sig_solu {
        max-width: 100%;
    }
}

@media(max-width: 650px) {
    .tabs {
        margin-bottom: 10px;
        margin-top: 0;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    
    .card_content_b .card_sont_text {
        transform: translateY(-90px);
    }

    .side_donation {
        top: 70px;
        z-index: 99999;
        transform: translateX(-402px);
    }
    
    .modal_header h3 {
        font-size: 17px;
    }
    
    span.skjd_tit {
        font-size: 16px;
    }
    
    .side_donation .bg_chng span {
        font-size: 15px;
    }
    
    .donation_modal {
        width: 400px;
    }

    .donation_modal .asldor__se {
        padding-top: 2px;
        padding-bottom: 5px;
        margin-top: 10px;
        border-color: #d5d2d2;
    }
    
    .donation_prob .asldor__se a {
        font-size: 17px;
    }

    .donation_content .skdu_de .form-group {
        margin-bottom: 6px;
    }
    
    .fast_don_submit {
        margin-top: 14px;
    }
    
    .modal_header {
        padding: 13px 30px 3px 30px;
    }

    .sam_im img {
        transform: scale(1);
        width: 80%;
        margin: 0 auto;
    }

    .fst_sec_cont {
        margin-top: 0;
    }

    .images_fch {
        margin-bottom: 10px;
        height: 280px !important;
    }

    .btm_blocks {
        margin-top: 25px;
    }

    #kafalah .sa_bloc_con {
        padding: 10px 0 20px 0;
        height: 270px;
    }

    .kf_tab {
        font-size: 14px;
        padding: 7px 0px;
    }

    img.mobile_size {
        display: block;
    }
    
    img.full_size {
        display: none;
    }
}

@media(max-width: 520px) {

.skj_subcont {
    display: none;
}

.sllae_pse_dgh strong {
    font-weight: 300;
}

.ske_ooelr {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    height: auto;
}

.cut_skjefnt {
    line-height: 60px;
    padding: 0;
    font-size: 120px;
    margin-top: 7px;
}

.sllae_pse_dgh {
    margin-top: 30px;
}

    .side_donation {
        transform: translateX(-340px);
    }
    
    .donation_modal {
        width: 340px;
    }

    .donation_modal .skdu_de {
        padding: 5px 20px;
        padding-top: 0;
        max-height: 450px;
        overflow: scroll;
    }
    
    .donation_modal .skie_fli label {
        padding: 5px 0;
        height: 36px;
    }

    .skie_fli label:last-child {
        max-width: 100%
    }

    .modal_header h3 {
        font-size: 18px !important
    }
    
    .donation_modal .skie_fli {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }

    #toggleLink:hover {
        opacity: 1;
    }
    
    #toggleLink {
        width: 47px;
        padding: 11px 4px 38px 4px !important;
        right: -47px;
        height: 195px !important;
        display: flex;
        justify-content: space-between;
    }
    
    #toggleLink svg {
        width: 20px;
        height: 24px;
    }

    .donation_content .skdu_de .form-group {
        margin-bottom: 2px;
    }
        
    .fast_don_submit {
        margin-top: 20px;
    }
    
    span.or_add_custom {
        font-size: 13px;
        margin: 13px 0 0 0;
    }

    #toggleLink span {
        transform: rotate(-90deg);
        height: 26px;
        white-space: pre;
        margin-bottom: 30px;
        font-size: 17px;
    }
    
}

@media(max-width: 430px) {
    .donation_modal {
        width: 300px;
    }

    .side_donation {
        transform: translateX(-301px);
    }

    .l-container {
        gap: 10px;
    }
    
    .b-game-card__cover {
        min-height: 180px;
    }
    
    a.block_s_link h3 {
        font-size: 18px;
        bottom: 15px;
        right: 15px;
    }

    .breadcrumbs {
        padding: 20px 0 15px 0;
    }
    
    .breadcrumbs li a {
        font-size: 14px;
    }
    
    ul.breadcrumbs__list {
        gap: 10px;
    }

    .ftr_menu a {
        font-size: 14px;
    }
    
    .ftr_menu {
        gap: 5px;
    }
        
}

.multi-steps > li.is-active ~ li|:hover {
    cursor:pointer;
}


html[lang="en"] .side_donation {
    left: auto;
    right: 0;
    transform: translateX(511px);
}

html[lang="en"] a#toggleLink {
    right: auto;
    left: -110px;
    border-radius: 5px 0 0 5px;
}

html[lang="en"] .side_donation.warehaly {
    transform: translateX(0);
}



@media (max-width: 650px) {
    html[lang="en"] .side_donation {
        transform: translateX(401px);
    }

    a#toggleLink {
        left: -107px;
    }
}

@media (max-width: 520px) {
    html[lang="en"] .side_donation {
        transform: translateX(340px);
    }

    a#toggleLink {
        left: -46px;
    }
}

@media (max-width: 430px) {
    html[lang="en"] .side_donation {
        transform: translateX(301px);
    }
}