@charset "UTF-8";
/*-----------------------
    mixins
-------------------------*/
/********************************
        font-face
/********************************/
@font-face {
    font-family: "Tajawal-Light";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Tajawal-Light.woff2") format("woff2"),
        url("../fonts/Tajawal-Light.woff") format("woff"),
        url("../fonts/Tajawal-Light.ttf") format("truetype"),
        url("../fonts/Tajawal-Light.eot") format("eot");
    font-display: swap;
}

/*---------*/
@font-face {
    font-family: "Tajawal-Regular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Tajawal-Regular.woff2") format("woff2"),
        url("../fonts/Tajawal-Regular.woff") format("woff"),
        url("../fonts/Tajawal-Regular.ttf") format("truetype"),
        url("../fonts/Tajawal-Regular.eot") format("eot");
    font-display: swap;
}

/*---------*/
@font-face {
    font-family: "Tajawal-Medium";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Tajawal-Medium.woff2") format("woff2"),
        url("../fonts/Tajawal-Medium.woff") format("woff"),
        url("../fonts/Tajawal-Medium.ttf") format("truetype"),
        url("../fonts/Tajawal-Medium.eot") format("eot");
    font-display: swap;
}

/*---------*/
@font-face {
    font-family: "Tajawal-Bold";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Tajawal-Bold.woff2") format("woff2"),
        url("../fonts/Tajawal-Bold.woff") format("woff"),
        url("../fonts/Tajawal-Bold.ttf") format("truetype"),
        url("../fonts/Tajawal-Bold.eot") format("eot");
    font-display: swap;
}

/*---------*/
@font-face {
    font-family: "Tajawal-ExtraBold";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Tajawal-ExtraBold.woff2") format("woff2"),
        url("../fonts/Tajawal-ExtraBold.woff") format("woff"),
        url("../fonts/Tajawal-ExtraBold.ttf") format("truetype"),
        url("../fonts/Tajawal-ExtraBold.eot") format("eot");
    font-display: swap;
}

/********************************

/********************************/

.images-upload-block {
    width: 100px;
    height: 100px;
    border: 1px solid #03a353;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin: auto;
}

.images-upload-block .image-uploader {
    position: absolute;
    bottom: -1px;
    right: 3px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    background: #03a353;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    z-index: 5;
}

.images-upload-block .image-uploader > input {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100%);
    height: 100%;
    font-size: 0;
    z-index: 1;
    opacity: 0;
}

.images-upload-block .uploaded-block {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.images-upload-block img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.images-upload-block .close {
    position: absolute;
    bottom: -1px;
    right: 3px;
    background: crimson;
    opacity: 1 !important;
    text-shadow: none;
    font-size: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    border: 2px solid #fff;
}

/********************************

/********************************/
ticket-info.small {
    padding: 15px 10px;
    border: 0.5px solid #c2c2c2;
    border-radius: 32px;
}

.ticket-info.small .ticket-id {
    font-size: 0.875em;
    color: #00162a;
    font-weight: 600;
}

.ticket-info.small .ticket-size {
    font-size: 0.75em;
    color: #00162ab3;
    font-weight: 500;
}

.ticket-info.small .remove-icon-bg {
    min-width: 27px;
    min-height: 27px;
    max-width: 27px;
    max-height: 27px;
    border: 1px solid #dea0b3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ticket-info.small .remove-icon-bg .remove-icon {
    color: #b21d4b;
    min-width: 21px;
    min-height: 21px;
    max-width: 21px;
    max-height: 21px;
    background-color: #b21d4b4d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-css {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

.uploaded__area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.uploaded__area .file_ {
    width: 120px;
    height: 120px;
    border-radius: 5px;
    margin: 7px;
    position: relative;
}

.uploaded__area .file_ img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.uploaded__area .file_ video {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.uploaded__area .file_ .docs_file {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #eee;
    color: crimson;
    font-size: 30px;
    position: relative;
}

.uploaded__area .file_ .play-button {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
}

.uploaded__area .file_ .play-button img {
    width: 100%;
    height: 100%;
}

.uploaded__area .file_ .remove_media {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    line-height: 22px;
    background-color: crimson;
    color: #fff;
    position: absolute;
    right: 4px;
    top: 4px;
    -webkit-transition: 0.3s all cubic-bezier(0, 0.11, 0.4, 1.29);
    transition: 0.3s all cubic-bezier(0, 0.11, 0.4, 1.29);
}

.uploaded__area .file_ .remove_media:hover {
    background-color: #fff;
    color: crimson;
}

.float_input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: 5;
    cursor: pointer;
}

.font10 {
    font-size: 10px;
}

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

.relative-parent {
    position: relative;
}

.uploud_label {
    width: 100%;
    padding: 30px;
    border-radius: 10px;
    border: 2px dashed #ddd;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.uploaded__area {
    position: relative;
    z-index: 9999;
}

.spanlight {
    color: #ddd;
    padding-inline: 8px;
}

.close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #03a353;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
}
/********************************

/********************************/

            body {
                display: flex;
                flex-direction: column;
                font-size: 14px !important
            }

            form {
                display: block;
                margin-top: 0em;
                margin-block-end: 1em;
            }


            .data-table-responsive.tickets .custom-table-header {
                font-size: 16px;
                color: #4c246e;
                font-weight: 600
            }

            @media(max-width: 1024px) {
                .data-table-responsive.tickets .custom-table-header {
                    min-width: 1400px
                }
            }

            .data-table-responsive.tickets .custom-table-item {
                padding: 15px 10px;
                border: .5px solid #c2c2c2;
                border-radius: 32px
            }

            .data-table-responsive.tickets .ticket-category {
                font-size: 16px
            }

            .data-table-responsive.tickets .ticket-category.green {
                color: #38ab32;
                font-weight: 700
            }

            .data-table-responsive.tickets .ticket-category.green .icon {
                min-width: 18px;
                height: 18px;
                border-radius: 5px;
                background-color: #3dab39
            }

            .data-table-responsive.tickets .status {
                background-color: #ffbaba;
                color: #ab5151;
                border-radius: 5px;
                font-size: 16px;
                padding: 6px 3px;
                text-align: center;
                max-width: 92px
            }

            .data-table-responsive.tickets .ticket-id {
                font-size: 13px;
                color: #00162a;
                font-weight: 500
            }

            .data-table-responsive.tickets .ticket-size {
                font-size: 12px;
                color: #00162ab3;
                font-weight: 500
            }

            .data-table-responsive.tickets .form-control {
                max-width: 104px;
                color: #4c246e;
                font-weight: 500;
                border: 1px solid #bcbcbc
            }

            @media(max-width: 1024px) {
                .data-table-responsive {
                    overflow-x: scroll
                }
            }

            @media(min-width: 992px) {
                .data-table-responsive tr td:first-child {
                    border-left: 1px solid #bcbcbc
                }

                .data-table-responsive tr td:last-child {
                    border-right: 1px solid #bcbcbc
                }
            }

            .p-top-1 {
                background-color: #03A353;
            }

            .ticket-status {
                min-width: 110px;
                width: fit-content;
                height: 31px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 32px;
                font-weight: 500;
                text-wrap: nowrap;
                text-transform: capitalize
            }

            .ticket-status.green,
            .ticket-status.status_accepted,
            .ticket-status.status-accepted,
            .ticket-status.status-refunded,
            .ticket-status.status_refunded,
            .ticket-status.status-completed,
            .ticket-status.status_completed {
                background-color: #baffc9;
                color: #51ab64;
                border-color: #baffc9
            }

            .ticket-status.btn-status-big {
                min-width: 163px
            }

            .ticket-status.yellow,
            .ticket-status.status-pending,
            .ticket-status.status_pending,
            .ticket-status.status-pending_payment,
            .ticket-status.status-pending-payment {
                background-color: #feffba;
                color: #aba251;
                border-color: #aba251
            }

            .ticket-status.red,
            .ticket-status.status-rejected,
            .ticket-status.status-not_delivered,
            .ticket-status.status-under_investigation,
            .ticket-status.status_rejected,
            .ticket-status.status_not_delivered,
            .ticket-status.status_under_investigation,
            .ticket-status.status-canceled,
            .ticket-status.status_canceled,
            .ticket-status.status_payment_failed,
            .ticket-status.status-payment_failed,
            .ticket-status.status_fine_applied_refunded,
            .ticket-status.status-fine_applied_refunded,
            .ticket-status.status_fine_applied_compensated,
            .ticket-status.status-fine_applied_compensated,
            .ticket-status.status-need_compensation,
            .ticket-status.status_need_compensation {
                background-color: #ffbaba;
                border-color: #ffbaba;
                color: #ab5151
            }

            .red-color {
                color: #b21d4b !important
            }

            img {
                overflow-clip-margin: content-box;
                overflow: clip;
            }

            .tooltip-css {
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
                overflow: hidden
            }
/********************************

/********************************/
/********************************

/********************************/
/********************************

/********************************/
/*-----------------------
    variables
-------------------------*/
/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
}

/*-----------------------
   fontFamily
-------------------------*/
/*-----------------------
   color
-------------------------*/
/*-----------------------
   Style
-------------------------*/
.mb-24 {
    margin-bottom: 24px;
}

::-moz-placeholder {
    font-size: 15px;
    line-height: 24px;
    color: rgb(242, 242, 242);
}

::placeholder {
    font-size: 15px;
    line-height: 24px;
    color: rgb(242, 242, 242);
}

.content {
    padding: 48px 0;
    border-bottom: 1px solid #e6e8ec;
}

.titleSection h3 {
    font-size: 32px;
    padding-left: 10%;
    line-height: 40px;
    color: #312e43;
    padding-left: 10%;
    font-family: "Tajawal-Bold", sans-serif;
}

@media only screen and (max-width: 991px) {
    .titleSection h3 {
        font-size: 24px;
        padding-left: 0;
    }
}

@media only screen and (max-width: 575px) {
    .titleSection h3 {
        font-size: 18px;
        line-height: 24px;
        text-align: center;
    }
}

.hidden {
    display: none !important;
}

.marginRow {
    margin: 24px 0;
}

/*-----------------------
    typography
-------------------------*/
html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15;
    scroll-behavior: initial;
    overflow-x: hidden !important;
}

body {
    font-size: 16px;
    background: #fff;
    vertical-align: baseline;
    line-height: 26px;
    font-weight: 400;
    overflow-x: hidden !important;
    font-family: "Tajawal-Regular", sans-serif;
}

ol,
ul {
    list-style: none;
}

figure,
ol,
p,
ul {
    margin: 0;
    padding: 0;
}

/**
 * Paragraphs
 */
p {
    font-family: "Tajawal-Regular", sans-serif;
    margin-top: 0;
    margin-bottom: 0;
}

/**
 * Headings
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    text-rendering: optimizelegibility;
    margin-top: 0;
    margin-bottom: 0;
}

h1,
.h1,
.alpha {
    margin-bottom: 0;
}

* + h1,
* + .h1,
* + .alpha,
* + h2,
* + .h2,
* + .beta,
* + h3,
* + .h3,
* + .gamma,
* + h4,
* + .h4,
* + .delta {
    margin-top: 16px;
}

small {
    font-size: 80%;
}

/**
 * Miscellaneous
 */
strong,
b {
    font-weight: "Tajawal-Bold", sans-serif;
}

em,
i {
    font-style: italic;
}

abbr[title] {
    border-bottom: 1px dotted #ddd;
    cursor: help;
}

/**
 * Blockquotes
 */
blockquote {
    padding-left: 10px;
    border-left: 4px solid #cccccc;
}

blockquote p {
    margin-bottom: 0;
    font-weight: 300;
}

blockquote small {
    display: block;
    color: #b3b3b3;
}

blockquote small::before {
    content: "— ";
}

q::before,
q::after,
blockquote::before,
blockquote::after {
    content: "";
}

cite {
    font-style: normal;
}

dfn {
    font-style: italic;
}

mark {
    padding: 2px 4px;
    border-radius: 3px;
}

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/**
 * Utilities
 */
.text-centre,
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

hr {
    border: 0;
    height: 1px;
}

.hyphenate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.p-relative {
    position: relative;
}

/*-----------------------
   reset
-------------------------*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15;
    scroll-behavior: initial;
    overflow-x: hidden !important;
}

body {
    font-size: 16px;
    color: #000000;
    vertical-align: baseline;
    line-height: 26px;
    font-weight: 400;
    overflow-x: hidden !important;
}

.no-padding {
    padding: 0 !important;
}

/**
   * Render the `main` element consistently in IE.
   */
main {
    display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
    font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
   * 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;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
    border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
    /* 1 */
    overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
    /* 1 */
    text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -moz-appearance: button;
    appearance: button;
    -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
    vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
    overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type="search"] {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type="search"]::-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 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
    display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
    display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
    display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
    display: none;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.pt-25 {
    padding-top: 25px;
}

#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100500;
}

#page-preloader .spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

/*-----------------------
  Button
-------------------------*/
.btn-showmore {
    display: block;
    width: 100%;
    background: rgb(232, 246, 241);
    border: 1px solid rgb(232, 246, 241);
    color: #03a353;
    border-radius: 64px;
    font-size: 16px;
    line-height: 16px;
    padding: 16px 0;
    font-family: "Tajawal-Medium", sans-serif;
    transition: all 1s ease-out;
}

.btn-showmore:hover {
    background: rgb(232, 246, 241);
    border: 1px solid rgb(232, 246, 241);
    transform: scale(1.1);
}

.btn-primary {
    background: #03a353;
    border: 1px solid #03a353;
    color: #ffffff !important;
    font-size: 16px;
    padding: 11px 27px 10px 28px;
    border-radius: 0px;
    transition: all 1s ease-out;
}

.btn-primary:hover {
    color: #03a353 !important;
    background: rgb(232, 246, 241);
    border: 1px solid #03a353;
}

.btn-outline-primary {
    background: #fff;
    border: 1px solid #03a353;
    color: #03a353 !important;
    padding: 11px 27px 10px 28px;
    border-radius: 0px;
    font-size: 16px;
    transition: all 1s ease-out;
}

.btn-outline-primary:hover {
    color: #03a353 !important;
    background: rgb(232, 246, 241);
    border: 1px solid #03a353;
}

.btn-danger {
    padding: 11px 27px 10px 28px;
    border-radius: 0px;
    font-size: 16px;
    cursor: not-allowed;
}

.btn-close {
    outline: none !important;
    box-shadow: none !important;
    border: transparent !important;
}

/*-----------------------
   header
-------------------------*/
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    padding: 22px 0px;
    z-index: 111;
}

@media only screen and (max-width: 798px) {
    header .btn {
        width: 100%;
        display: block;
        margin-top: 0;
    }
}

@media only screen and (max-width: 798px) {
    header .container {
        padding: 0 !important;
    }
}

@media only screen and (max-width: 798px) {
    header {
        padding: 0;
    }
}

header .clientDropdown.dropdown-toggle {
    background: transparent;
    border: 0;
    padding: 0;
}

header .clientDropdown.dropdown-toggle img {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    margin: auto;
}

header .clientDropdown.dropdown-toggle::after {
    content: unset;
}

header .clientDropdown.dropdown-toggle:active {
    background: transparent !important;
    border: 0 !important;
}

header .clientDropdownInner.show {
    padding: 16px 16px;
}

header .clientDropdownInner span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #03a353;
    font-family: "Tajawal-Medium", sans-serif;
}

header .clientDropdownInner .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 0;
}

header .clientDropdownInner .dropdown-item:hover {
    background: transparent;
}

header .clientDropdownInner .dropdown-item i {
    color: #03a353;
}

header .clientDropdownInner .dropdown-item:last-child {
    margin-bottom: 0;
    color: #f44336 !important;
}

header .clientDropdownInner .dropdown-item:last-child i {
    color: #f44336;
}

.nav {
    position: relative;
    width: 100%;
    padding: 22px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav > .nav-header {
    padding-left: 1rem;
}

.nav > .nav-header > .nav-img img {
    height: 65px;
}

.nav > .nav-list {
    display: flex;
    gap: 2rem;
    align-items: center;
}

@media only screen and (max-width: 1200px) {
    .nav > .nav-list {
        gap: 1rem;
    }
}

@media only screen and (max-width: 798px) {
    .nav > .nav-list {
        padding: 0 25px;
    }
}

.nav > .nav-list > li {
    list-style-type: none;
}

.nav > .nav-list > li a {
    text-decoration: none;
    color: #181818;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
    text-transform: capitalize;
    font-family: "Tajawal-Medium", sans-serif;
}

.nav > .nav-list > li a.active {
    color: #03a353;
}

.nav > #nav-check {
    display: none;
}

.mobileList {
    display: none;
}

@media (max-width: 991px) {
    .nav {
        padding: 1rem;
    }

    .nav > .nav-btn {
        display: flex;
        position: absolute;
        left: 0;
        padding-top: 0.2rem;
        align-items: center;
        flex-direction: row-reverse;
        position: absolute;
        left: 0;
        padding-top: 0.2rem;
    }

    .desktopOnly {
        display: none;
    }

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

    .mobileList li a {
        color: #181818;
        font-size: 16px;
        line-height: 16px;
        cursor: pointer;
        text-transform: capitalize;
        font-family: "Tajawal-Medium", sans-serif;
    }

    .nav > .nav-btn > label {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 13px;
        margin-bottom: 0 !important;
    }

    .nav > .nav-btn > label > span {
        display: block;
        width: 25px;
        height: 10px;
        border-top: 2px solid #03a353;
    }

    .nav > .nav-list {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        background-color: #fff;
        height: 0;
        transition: all 0.3s ease-in;
        top: 90px;
        left: 0;
        overflow: hidden;
        z-index: 111;
    }

    .nav > .nav-list > li {
        width: 100%;
        margin-top: 1rem;
    }

    .nav > #nav-check:checked ~ .nav-list {
        height: calc(100vh - 0px);
        padding: 0 24px;
    }

    header .btn {
        display: block;
        width: 100%;
    }
}

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

.headerLogin li a {
    text-decoration: none;
    color: #181818;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
    text-transform: capitalize;
}

/*-----------------------
    Pages
-------------------------*/
/*-----------------------
     Form
-------------------------*/
label {
    color: #777e90;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 16px;
}

label a {
    color: #03a353;
    text-decoration: underline;
}

.input-group {
    border-radius: 0;
    border: 1px solid rgb(242, 242, 242);
    box-shadow: none;
    font-size: 14px;
    color: #777e90;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.input-group input {
    background: transparent;
    outline: none !important;
    box-shadow: none !important;
    border: transparent !important;
    margin-right: 5px !important;
}

.input-group .input-group-text {
    position: relative;
    background: transparent;
    border: 0;
    color: #03a353;
}

.input-group .input-group-text::after {
    position: absolute;
    content: " ";
    top: 0px;
    left: 0;
    background: #f2f2f2;
    height: calc(100% - 0px);
    width: 1px;
}

.bootstrap-select > .dropdown-toggle {
    border-radius: 0;
    border: 1px solid rgb(242, 242, 242);
    box-shadow: none;
    font-size: 14px;
    color: #777e90;
    min-height: 40px;
    display: flex;
    align-items: center;
    outline: none !important;
    box-shadow: none !important;
}

.checkboxItem {
    border: 1px solid rgb(242, 242, 242);
    box-shadow: none;
    font-size: 14px;
    color: #777e90;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkboxItem label {
    margin-bottom: 0 !important;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
    outline-offset: 0px !important;
    outline: -webkit-focus-ring-color auto 0px !important;
}

.dropdown-menu.show {
    padding: 10px 10px;
    border: 1px solid #fff;
    max-height: 228px;
    overflow-y: auto;
    margin-top: 0;
    box-shadow: 0px 0px 7px 0px rgba(212, 212, 212, 0.25);
}

.form-check-input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 0;
    margin-left: 10px;
    border: 1px solid #03a353;
    box-shadow: unset !important;
}

.form-check-input:checked {
    background-color: #03a353;
    border-color: #03a353;
}

textarea.form-control {
    border-radius: 0;
    border: 1px solid rgb(242, 242, 242) !important;
    box-shadow: none;
    font-size: 14px;
    color: #777e90;
    resize: unset;
    outline: none !important;
    box-shadow: none !important;
}

textarea.form-control:focus-within {
    border: 1px solid #03a353 !important;
    border-color: #03a353 !important;
}

[type="email"],
[type="number"],
[type="tel"],
[type="url"] {
    direction: rtl;
}

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

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

/*-----------------------
    login Form
-------------------------*/
.loginForm {
    min-height: 100vh;
}

.loginForm .infoPart {
    padding: 30px 80px 60px 80px;
}

@media only screen and (max-width: 800px) {
    .loginForm .infoPart {
        padding: 30px 15px;
    }
}

.loginForm .infoPart .headerForm {
    padding-top: 40px;
    margin-bottom: 32px;
}

@media only screen and (max-width: 769px) {
    .loginForm .infoPart .headerForm {
        padding-top: 15px;
    }
}

.loginForm .infoPart .headerForm h3 {
    font-size: 40px;
    line-height: 45px;
    margin-bottom: 16px;
    color: #03a353;
    font-family: "Tajawal-Bold", sans-serif;
}

@media only screen and (max-width: 769px) {
    .loginForm .infoPart .headerForm h3 {
        font-size: 28px;
        line-height: 32px;
    }
}

.loginForm .infoPart .headerForm p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 0;
    color: #777e90;
}

@media only screen and (max-width: 769px) {
    .loginForm .infoPart .headerForm p {
        font-size: 16px;
    }
}

.loginForm .infoPart .item-form {
    margin-bottom: 32px;
}

.loginForm .infoPart .forgetPassword {
    margin-bottom: 15px;
}

.loginForm .infoPart .forgetPassword .forgetPasswordLink {
    font-size: 16px;
    line-height: 20px;
    color: #03a353;
    text-align: left;
    display: block;
    font-family: "Tajawal-Bold", sans-serif;
}

.loginForm .infoPart .createAccount {
    font-size: 16px;
    color: #777e90;
}

.loginForm .infoPart .createAccount .createAccountLink {
    color: #03a353;
    font-family: "Tajawal-Medium", sans-serif;
}

.loginForm .brand img {
    height: 65px;
}

.loginForm .imagePart {
    position: relative;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    position: relative;
    min-height: 100vh;
}

@media only screen and (max-width: 769px) {
    .loginForm .imagePart {
        background: none !important;
        height: unset !important;
        min-height: unset !important;
    }
}

.loginForm .imagePart::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: " ";
    background: rgba(0, 0, 0, 0.7);
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

@media only screen and (max-width: 769px) {
    .loginForm .imagePart::after {
        content: unset !important;
    }
}

/*-----------------------
    Home Banners Us
-------------------------*/
.homeBanners .swiper-slide img {
    height: 900px;
    -o-object-fit: cover;
    object-fit: cover;
}

/*-----------------------
    browse With Us
-------------------------*/
.browseWithUs .titleSection {
    margin-bottom: 40px;
}

.browseWithUs .browseWithUsCard {
    overflow: hidden;
    background: #f9f9f9;
    border-radius: 16px;
}

.browseWithUs .browseWithUsCard a {
    transition: all 1s ease-out;
}

.browseWithUs .browseWithUsCard:hover a {
    transform: scale(1.1);
}

.browseWithUs .browseWithUsCard .imagePart img {
    width: 100%;
    height: 300px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.browseWithUs .browseWithUsCard .textPart {
    padding: 24px;
}

.browseWithUs .browseWithUsCard .textPart h3 {
    font-size: 18px;
    color: #312e43;
    margin-bottom: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: "Tajawal-Bold", sans-serif;
}

.browseWithUs .divSlider {
    display: flex;
    align-items: center;
    gap: 49px;
    justify-content: end;
}

.browseWithUs .swiper-button-next,
.browseWithUs .swiper-button-prev {
    position: relative;
    width: 45px;
    height: 45px;
    display: block;
    text-align: center;
    border: 1px solid #03a353;
    box-shadow: 0px 7px 14px 0px rgba(177, 177, 177, 0.4);
    border-radius: 100%;
    background: #03a353;
    color: #fff;
}

@media only screen and (max-width: 769px) {
    .browseWithUs .swiper-button-next,
    .browseWithUs .swiper-button-prev {
        margin-bottom: 16px;
    }
}

.browseWithUs .swiper-button-next:after,
.browseWithUs .swiper-rtl .swiper-button-prev:after,
.browseWithUs .swiper-button-prev:after,
.browseWithUs .swiper-rtl .swiper-button-next:after {
    font-size: 20px;
    line-height: 43px;
}

/*-----------------------
    Order Ticket
-------------------------*/
.orderTicket .titleSection {
    margin-bottom: 16px;
}

.orderTicket .orderTicketSteps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.orderTicket .orderTicketSteps li {
    transition: all 1s ease-out;
}

.orderTicket .orderTicketSteps li:hover {
    transform: scale(1.1);
}

.orderTicket .orderTicketSteps .imagepart {
    width: 100px;
    height: 100px;
    padding: 14px;
    display: block;
    border-radius: 100%;
    margin-bottom: 20px;
    border: 1px solid #03a353;
    box-shadow: 0px 7px 14px 0px rgba(177, 177, 177, 0.4);
}

.orderTicket .orderTicketSteps .imagepart img {
    height: 70px;
    display: block;
    margin: 0 auto;
}

.orderTicket .orderTicketSteps p {
    text-align: center;
    font-size: 18px;
    line-height: 32px;
    color: #03a353;
    font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Customer Opinion
-------------------------*/
.customerOpinion h3 {
    font-size: 32px;
    line-height: 40px;
    color: rgb(49, 46, 67);
    margin-bottom: 10px;
    font-family: "Tajawal-Bold", sans-serif;
}

@media only screen and (max-width: 575px) {
    .customerOpinion h3 {
        font-size: 18px;
        line-height: 24px;
        text-align: center;
    }
}

.customerOpinion p {
    font-size: 16px;
    line-height: 28px;
    color: #777e90;
    margin-bottom: 32px;
}

.customerOpinion .customerOpinionCard {
    padding: 24px;
    border: 1px solid #f2f2f2;
    border-radius: 0px;
    background-color: #fff;
    height: 100%;
}

.customerOpinion .customerOpinionCard .infoClient {
    margin-bottom: 24px;
}

.customerOpinion .customerOpinionCard .infoClient ul {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.customerOpinion .customerOpinionCard .infoClient ul:last-child {
    margin-bottom: 0;
}

.customerOpinion .customerOpinionCard .infoClient ul li {
    font-size: 16px;
    line-height: 24px;
    color: #03a353;
}

.customerOpinion .customerOpinionCard .infoClient ul li i {
    color: #ccc;
}

.customerOpinion .customerOpinionCard .infoClient ul li i.active {
    color: #ffc107;
}

.customerOpinion .customerOpinionCard .infoClient ul li img {
    width: 45px;
    height: 45px;
    border-radius: 100%;
}

.customerOpinion .customerOpinionCard p {
    color: #777e90;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
    text-align: right;
    text-align: justify;
}

.swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #03a353;
    opacity: 1;
    border: 1px solid #03a353;
    background: #fff;
}

.swiper-pagination-bullet-active {
    color: #fff;
    background: #03a353;
}

.modal {
    z-index: 11111;
}

.modal .modal-header {
    border: 0;
}

.modal .titleHeader h3 {
    font-size: 24px;
    line-height: 35px;
    margin-bottom: 10px;
    color: #03a353;
    font-family: "Tajawal-Bold", sans-serif;
}

@media only screen and (max-width: 769px) {
    .modal .titleHeader h3 {
        font-size: 18px;
        line-height: 24px;
    }
}

.modal .titleHeader p {
    font-size: 16px;
    line-height: 28px;
    color: #777e90;
    margin-bottom: 32px;
}

.modal .modal-content,
.modal .modal-body {
    display: block;
    border-radius: 0;
    text-align: center;
    border: 1px solid #fff;
}

.modal .wrapper {
    position: relative;
    display: block;
    border: none;
    font-size: 14px;
    margin: 20px auto;
    text-align: center;
}

.modal .wrapper input {
    border: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    opacity: 0;
}

.modal .wrapper label {
    position: relative;
    color: #c8c8c8;
}

.modal .wrapper label::before {
    margin: 5px;
    content: "\f005";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 1.5em;
    color: #ccc;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.modal .wrapper input:checked ~ label:before {
    color: #ffc107;
}

.modal .wrapper label:hover ~ label:before {
    color: #ffdb70;
}

.modal .wrapper label:hover:before {
    color: #ffc107;
}

.modal textarea {
    margin-bottom: 20px;
}

/*-----------------------
    breadcrumb Opinion
-------------------------*/
.singlePage {
    padding: 48px 0;
}

.breadcrumb img {
    height: 400px;
    -o-object-fit: cover;
    object-fit: cover;
}

.breadcrumb .breadcrumbList {
    padding-top: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.breadcrumb .breadcrumbList li {
    color: #03a353;
    position: relative;
    font-size: 18px;
    font-family: "Tajawal-Regular", sans-serif;
}

.breadcrumb .breadcrumbList li a {
    padding-left: 16px;
    color: #1e1e1e;
    font-family: "Tajawal-Medium", sans-serif;
}

.breadcrumb .breadcrumbList li a:after {
    font-size: 14px;
    font-family: FontAwesome;
    position: absolute;
    content: "\f053";
    margin-right: 11px;
    color: #1e1e1e;
}

/*-----------------------
    Event Details
-------------------------*/
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(
        .input-group-btn
    ) {
    width: 100%;
}

.eventDetails {
    padding: 48px 0;
}

.eventDetails .eventDetailsPart .imagePart {
    position: relative;
}

.eventDetails .eventDetailsPart .imagePart img {
    width: 100%;
    height: 320px;
    -o-object-fit: cover;
    object-fit: cover;
    margin-bottom: 30px;
    border-radius: 16px 16px 0 0;
}

.eventDetails .eventDetailsPart .imagePart .titleEvent {
    position: absolute;
    bottom: 30px;
    right: 0;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    padding: 9px 10px 8px 10px;
}

.eventDetails .eventDetailsPart .textPart h3 {
    font-size: 24px;
    color: #312e43;
    margin-bottom: 6px;
    font-family: "Tajawal-Medium", sans-serif;
}

.eventDetails .eventDetailsPart .textPart .date,
.eventDetails .eventDetailsPart .textPart .location {
    font-size: 16px;
    line-height: 28px;
    color: #777e90;
    margin-bottom: 10px;
}

.eventDetails .eventDetailsPart .textPart .date i,
.eventDetails .eventDetailsPart .textPart .location i {
    padding-left: 8px;
}

.eventDetails .eventDetailsPart .textPart .locationDate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.eventDetails .eventDetailsPart .textPart p {
    color: #03a353;
    margin-bottom: 10px;
}

.eventDetails .eventDetailsPart .textPart .availableTicket {
    margin-top: 25px;
}

.eventDetails .eventDetailsPart .textPart .availableTicket h3 {
    font-size: 30px;
    line-height: 45px;
    margin-bottom: 32px;
    color: #03a353;
    font-family: "Tajawal-Bold", sans-serif;
}

.eventDetails
    .eventDetailsPart
    .textPart
    .availableTicket
    .setailsSelectOption {
    margin: 25px 0;
}

.eventDetails .eventDetailsPart .stageImage {
    border: 1px solid #bcbcbc;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eventDetails .eventDetailsPart .stageImage img {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eventDetails .completetext {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 16px;
    color: #f44336;
}

.eventDetails .cardTicket {
    border: 1px solid rgb(242, 242, 242);
    padding: 24px;
    margin-bottom: 32px;
}

.eventDetails .cardTicket .headerCard h4 {
    font-size: 24px;
    line-height: 25px;
    margin-bottom: 24px;
    color: #03a353;
    font-family: "Tajawal-Bold", sans-serif;
}

.eventDetails .cardTicket li {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    color: #777e90;
    font-family: "Tajawal-Medium", sans-serif;
}

@media screen and (max-width: 991px) {
    .eventDetails .btn-outline-primary {
        margin-bottom: 16px;
    }
}

.eventDetails .form-check {
    display: flex;
    gap: 5px;
}

/*-----------------------
    tapsSection
-------------------------*/
.tapsSection .nav {
    background: rgba(92, 92, 92, 0.04);
    padding: 7px 8px;
    border-radius: 0px;
    margin: 0 auto;
    margin-bottom: 34px !important;
    border-bottom: 0;
}

.tapsSection .nav-tabs .nav-link {
    font-size: 16px;
    color: #6a6a6a;
    padding: 1em 0.5em;
    border-radius: 0;
    border: 1px solid transparent;
}

.tapsSection .nav-tabs .nav-link.active {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.0509803922);
    color: #312e43;
    border: 1px solid #fff;
    font-family: "Tajawal-Medium", sans-serif;
}

.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right;
}

.bootstrap-select > .dropdown-toggle {
    text-align: right;
    background: #fff;
    border-radius: 0;
    outline: none;
}

/*-----------------------
    terms-and-conditions
-------------------------*/
.terms-and-conditions .text-terms .item {
    margin-bottom: 30px;
}

.terms-and-conditions .text-terms .item ol {
    counter-reset: custom;
    list-style-type: none;
    padding: 0;
    margin: 0px;
}

.terms-and-conditions .text-terms .item ol li {
    counter-increment: custom;
    padding: 15px 46px 15px 16px;
    position: relative;
}

.terms-and-conditions .text-terms .item ol li:before {
    content: counters(custom, ".") " ";
    width: 36px;
    position: absolute;
    right: 0;
    height: 36px;
    line-height: 38px;
    background: transparent;
    border: 1px solid #52b14e;
    color: #52b14e;
    border-radius: 50%;
    text-align: center;
}

.terms-and-conditions .text-terms .item ol li p {
    font-size: 16px;
    color: #000000;
    line-height: 34px;
    margin-bottom: 10px;
    font-family: "Tajawal-Medium", sans-serif;
}

.terms-and-conditions .text-terms .item ol li span {
    font-size: 16px;
    line-height: 34px;
    margin-bottom: 5px;
    padding-right: 17px;
    position: relative;
    color: #000000;
    font-family: "Tajawal-Medium", sans-serif;
}

.terms-and-conditions .text-terms .item ol li span::before {
    position: absolute;
    content: " ";
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: 12px;
    background: #52b14e;
    line-height: 34px;
}

.terms-and-conditions .text-terms .item h4 {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 5px;
    color: #000000;
    font-family: "Tajawal-Medium", sans-serif;
}

.terms-and-conditions .text-terms h3 {
    font-size: 32px;
    color: #000000;
    margin-bottom: 20px;
    line-height: 34px;
    font-family: "Tajawal-Medium", sans-serif;
}

.terms-and-conditions .text-terms p {
    color: #000000;
    font-size: 18px;
    margin-bottom: 50px;
    line-height: 40px;
    font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
    Table
-------------------------*/
.Side-by-side {
    color: #03a353;
}

.rwd-table {
    margin: auto;
    min-width: 100%;
    max-width: 100%;
    text-align: center;
    border-collapse: collapse;
}

.rwd-table tr:first-child {
    border-top: none;
    background: rgba(92, 92, 92, 0.04);
    padding: 7px 8px;
    color: #6a6a6a;
    font-weight: normal;
}

.rwd-table tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f5f9fc;
}

.rwd-table tr:nth-child(odd):not(:first-child) {
    background-color: #fff;
}

.rwd-table th {
    display: none;
}

.rwd-table td {
    display: block;
}

.rwd-table td:first-child {
    margin-top: 0.5em;
}

.rwd-table td:last-child {
    margin-bottom: 0.5em;
}

.rwd-table td:before {
    content: attr(data-th);
    font-weight: bold;
    width: 100%;
    display: block;
    color: #000;
    text-align: right;
}

.rwd-table th,
.rwd-table td {
    text-align: left;
}

.rwd-table {
    color: #333;
    border-radius: 0.4em;
    overflow: hidden;
}

.rwd-table tr {
    border-color: #fff;
}

.rwd-table th,
.rwd-table td {
    padding: 0.5em 1em;
}

@media screen and (max-width: 780px) {
    .rwd-table tr:nth-child(2) {
        border-top: none;
    }

    td .btn-outline-primary,
    td .btn-danger {
        display: block;
        width: 100%;
    }
}

@media screen and (min-width: 780px) {
    .rwd-table tr:hover:not(:first-child) {
        background-color: #fff;
    }

    .rwd-table td:before {
        display: none;
    }

    .rwd-table th,
    .rwd-table td {
        display: table-cell;
        padding: 0.25em 0.5em;
        text-align: center;
        font-weight: normal;
    }

    .rwd-table th:first-child,
    .rwd-table td:first-child {
        padding-left: 0;
    }

    .rwd-table th:last-child,
    .rwd-table td:last-child {
        padding-right: 0;
    }

    .rwd-table th,
    .rwd-table td {
        padding: 1em !important;
    }
}

/*-----------------------
    contact-us-section
-------------------------*/
.contact-us-section .read-more-border-button {
    margin-top: 32px !important;
}

.contact-us-section .title-sec p {
    padding-left: 10%;
}

@media screen and (max-width: 991px) {
    .contact-us-section .title-sec p {
        padding-left: 0;
    }
}

.contact-us-section .title-sec p {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 48px;
    color: #1e1e1e;
    font-family: "Tajawal-Bold", sans-serif;
}

@media screen and (max-width: 769px) {
    .contact-us-section .title-sec p {
        font-size: 24px;
        line-height: 32px;
    }
}

.contact-us-section ul.item-contact-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.contact-us-section ul.item-contact-list li:first-child i {
    margin-left: 10px;
    color: #03a353;
}

.contact-us-section ul.item-contact-list li span {
    font-size: 16px;
    line-height: 18px;
    display: block;
    margin-bottom: 10px;
    color: #777e90;
}

.contact-us-section ul.item-contact-list li p {
    font-size: 16px;
    line-height: 15px;
    margin-bottom: 0;
    color: #1e1e1e;
    font-family: "Tajawal-Bold", sans-serif;
}

.contact-us-section .item-contact-list:last-child p {
    padding-left: 13%;
    line-height: 23px;
}

.form-contact-part .input-group input::-moz-placeholder,
.form-contact-part .input-group textarea::-moz-placeholder {
    font-size: 14px;
    line-height: 15px;
    color: #adafb2;
}

.form-contact-part .input-group input::placeholder,
.form-contact-part .input-group textarea::placeholder {
    font-size: 14px;
    line-height: 15px;
    color: #adafb2;
}

/*-----------------------
    about-section
-------------------------*/
.about-section .img-about-section img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.about-section h2 {
    color: #03a353;
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 32px;
    font-family: "Tajawal-Bold", sans-serif;
}

.about-section h4 {
    color: #1e1e1e;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
    font-family: "Tajawal-Bold", sans-serif;
}

.about-section p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    color: #1e1e1e;
}

.about-section .itemQuestion {
    margin-top: 32px;
}

/*-----------------------
    about-section
-------------------------*/
.Clients .clientsBox {
    margin-top: 35px;
}

.Clients .clientsBox img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/*-----------------------
    countdownSpan
-------------------------*/
.countdownSpan {
    margin-top: 35px;
    text-align: center;
    font-size: 65px;
    letter-spacing: 11px;
    color: #f44336;
    font-family: "Tajawal-ExtraBold", sans-serif;
}

/*-----------------------
    discountCoupon
-------------------------*/
.discountCoupon {
    margin: 32px 0;
}

.discountCoupon h4 {
    font-size: 16px;
    line-height: 24px;
    color: #03a353;
    margin-bottom: 16px;
}

.discountCoupon .input-group {
    padding: 8px;
}

.discountCoupon .btn-outline-secondary {
    background: transparent;
    border: 0 !important;
    outline: none !important;
    color: #03a353;
    font-family: "Tajawal-Medium", sans-serif;
}

.paymentList li {
    border-radius: 0;
    border: 1px solid rgb(242, 242, 242);
    background: transparent
        linear-gradient(
            180deg,
            rgba(82, 177, 78, 0.08) 0%,
            rgba(185, 208, 46, 0.08) 100%
        );
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.paymentList li .form-check {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.paymentList li .form-check label {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.paymentList li .form-check label span {
    font-size: 16px;
}

.paymentList li .collectionImg {
    width: 200px;
}

.paymentList li .paymentImg {
    width: 80px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    box-shadow: none !important;
    outline: none;
}

/*-----------------------
    Progress
-------------------------*/
.progressSection ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.progressSection ul span {
    font-size: 14px;
}

.progressSection ul .price {
    font-size: 16px;
    color: #03a353;
    font-family: "Tajawal-Medium", sans-serif;
}

.progressSection .progress--circle {
    position: relative;
    display: inline-block;
    margin: 1rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ddd;
}

.progressSection .progress--circle:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: white;
}

.progressSection .progress--circle:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #03a353;
}

.progressSection .progress__number {
    position: absolute;
    top: 50%;
    width: 100%;
    line-height: 1;
    margin-top: -0.75rem;
    text-align: center;
    font-size: 1.5rem;
    color: #777;
}

.progressSection .progress--pie:before {
    display: none;
}

.progressSection .progress--pie .progress__number {
    color: white;
    text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 1px;
}

.progressSection .progress--bar.progress--0:after {
    width: 0%;
}

.progressSection .progress--circle.progress--0:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(90deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--5:after {
    width: 5%;
}

.progressSection .progress--circle.progress--5:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(108deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--10:after {
    width: 10%;
}

.progressSection .progress--circle.progress--10:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(126deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--15:after {
    width: 15%;
}

.progressSection .progress--circle.progress--15:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(144deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--20:after {
    width: 20%;
}

.progressSection .progress--circle.progress--20:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(162deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--25:after {
    width: 25%;
}

.progressSection .progress--circle.progress--25:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(180deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--30:after {
    width: 30%;
}

.progressSection .progress--circle.progress--30:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(198deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--35:after {
    width: 35%;
}

.progressSection .progress--circle.progress--35:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(216deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--40:after {
    width: 40%;
}

.progressSection .progress--circle.progress--40:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(234deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--45:after {
    width: 45%;
}

.progressSection .progress--circle.progress--45:after {
    background-image: linear-gradient(
            90deg,
            #ddd 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(252deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--50:after {
    width: 50%;
}

.progressSection .progress--circle.progress--50:after {
    background-image: linear-gradient(
            -90deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--55:after {
    width: 55%;
}

.progressSection .progress--circle.progress--55:after {
    background-image: linear-gradient(
            -72deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--60:after {
    width: 60%;
}

.progressSection .progress--circle.progress--60:after {
    background-image: linear-gradient(
            -54deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--65:after {
    width: 65%;
}

.progressSection .progress--circle.progress--65:after {
    background-image: linear-gradient(
            -36deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--70:after {
    width: 70%;
}

.progressSection .progress--circle.progress--70:after {
    background-image: linear-gradient(
            -18deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--75:after {
    width: 75%;
}

.progressSection .progress--circle.progress--75:after {
    background-image: linear-gradient(
            0deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--80:after {
    width: 80%;
}

.progressSection .progress--circle.progress--80:after {
    background-image: linear-gradient(
            18deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--85:after {
    width: 85%;
}

.progressSection .progress--circle.progress--85:after {
    background-image: linear-gradient(
            36deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--90:after {
    width: 90%;
}

.progressSection .progress--circle.progress--90:after {
    background-image: linear-gradient(
            54deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--95:after {
    width: 95%;
}

.progressSection .progress--circle.progress--95:after {
    background-image: linear-gradient(
            72deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

.progressSection .progress--bar.progress--100:after {
    width: 100%;
}

.progressSection .progress--circle.progress--100:after {
    background-image: linear-gradient(
            90deg,
            #03a353 50%,
            transparent 50%,
            transparent
        ),
        linear-gradient(270deg, #03a353 50%, #ddd 50%, #ddd);
}

/*-----------------------
    Progress
-------------------------*/
.profileContentCard {
    background: #fff;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.0509803922);
    border-radius: 10px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profileContentCard .btn-danger {
    cursor: pointer !important;
}

.profileContentCard .bootstrap-select > .dropdown-toggle {
    min-height: 48px;
}

.profileContentCard .profileNav {
    padding: 24px;
    align-items: start;
    justify-content: start;
}

.profileContentCard .nav-pills .nav-link {
    font-size: 16px;
    color: #777e90;
    margin-bottom: 24px;
    padding: 0;
    text-align: right;
    font-family: "Tajawal-Medium", sans-serif;
}

.profileContentCard .nav-pills .nav-link.active,
.profileContentCard .nav-pills .show > .nav-link {
    background: #fff !important;
    border: 0;
    color: #03a353;
}

.profileContentCard .profilebtnLogout {
    font-size: 16px;
    color: #f44336 !important;
    font-family: "Tajawal-Bold", sans-serif;
}

.profileContentCard .cardProfileDetailsHeader {
    margin-bottom: 32px;
}

.profileContentCard .cardProfileDetailsHeader h3 {
    font-size: 20px;
    line-height: 27px;
    color: #282626;
    margin-bottom: 8px;
    font-family: "Tajawal-Bold", sans-serif;
}

.profileContentCard .cardProfileDetailsHeader span {
    font-size: 15px;
    line-height: 24px;
    color: #777e90;
}

.profileContentCard .cardProfileDetailsHeader span.dangernotification {
    color: #f44336;
    font-family: "Tajawal-Medium", sans-serif;
}

.profileContentCard .rwd-table td {
    padding: 0.5em !important;
    font-size: 14px;
}

.profileContentCard .rwd-table th {
    font-size: 14px;
    padding: 0.5em !important;
}

.textNormal {
    text-align: right !important;
}

.cardProfileDetailsbody .ticketInfo {
    align-items: center;
}

.cardProfileDetailsbody .ticketInfo img {
    width: 100%;
    height: 100px;
    -o-object-fit: cover;
    object-fit: cover;
}

.cardProfileDetailsbody .ticketInfo li p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 16px;
    color: #000;
}

.cardProfileDetailsbody .locationDate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 28px;
    color: #777e90;
    margin-bottom: 10px;
}

.steps li {
    margin-bottom: 16px;
    position: relative;
    padding-right: 20px;
}

.steps li::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100%;
    right: 0;
    top: 8px;
    bottom: 0;
    background: #03a353;
}

.steps li p {
    font-size: 16px;
    color: #777e90;
    line-height: 24px;
    font-family: "Tajawal-Medium", sans-serif;
}

.steps li p a {
    color: #f44336;
}

.notifiText,
.ticketSteps {
    display: block;
    width: 100%;
    color: #f44336;
    font-size: 16px;
    line-height: 24px;
    margin: 8px 0;
    font-family: "Tajawal-Medium", sans-serif;
}

.ticketSteps {
    border: 1px solid #f44336;
    border-radius: 0;
}

.ticketSteps:hover {
    border: 1px solid #f44336;
    background: #f44336;
    color: #fff;
}

.showTicket {
    color: #03a353;
    font-size: 14px;
    border: 1px solid #03a353;
    padding: 8px;
    border-radius: 0;
}

.showTicket:hover {
    border: 1px solid #03a353;
    background: #03a353;
    color: #fff;
}

/*-----------------------
    Profile
-------------------------*/
.profileheaderCard {
    text-align: center;
}

.profileheaderCard img {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    margin: 0 auto 16px auto;
    box-shadow: 0px 6px 10px rgba(116, 116, 116, 0.1607843137);
    border: 1px solid #e4e2e2;
}

.profileheaderCard .textClient h3 {
    font-size: 18px;
    line-height: 24px;
    color: #282626;
    font-family: "Tajawal-Medium", sans-serif;
}

.profileheaderCard .textClient .emailSpan {
    font-size: 14px;
    color: #777e90;
}

/*-----------------------
    Search Events
-------------------------*/
.searchEvents {
    padding: 20px 0;
}

.searchEvents .searchEventsCard {
    box-shadow: 0px 0px 100px 0px rgba(217, 217, 217, 0.2509803922);
    border-radius: 24px;
    border: 1px solid #fff;
    padding: 40px 41px 30px 48px;
    margin-bottom: 35px;
}

@media screen and (max-width: 769px) {
    .searchEvents .searchEventsCard {
        padding: 20px 10px;
    }
}

.searchEvents .searchEventsCard h3 {
    color: #03a353;
    font-size: 32px;
    line-height: 24px;
    margin-bottom: 16px;
    font-family: "Tajawal-Bold", sans-serif;
}

@media screen and (max-width: 769px) {
    .searchEvents .searchEventsCard h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
}

.searchEvents .searchEventsCard p {
    color: #777e90;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 32px;
}

@media screen and (max-width: 769px) {
    .searchEvents .searchEventsCard p {
        font-size: 14px;
    }
}

.searchEvents .searchEventsCard .input-group {
    border: 1px solid #03a353;
    color: #777e90;
    min-height: 55px;
    border-radius: 65px;
    overflow: hidden;
}

.searchEvents .searchEventsCard .input-group i {
    font-size: 20px;
}

.searchEvents .searchEventsCard .input-group input {
    background: transparent !important;
}

.searchEvents .searchEventsCard .input-group .input-group-text::after {
    background: #03a353;
}

.searchEvents
    .searchEventsCard
    .input-group
    .input-group-prepend.button
    button.btn {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 20px;
    line-height: 24px;
    font-family: "Tajawal-Medium", sans-serif;
    color: #03a353;
    background-color: rgba(3, 163, 83, 0.1019607843) !important;
    border: 1px solid rgba(3, 163, 83, 0.1019607843) !important;
    border-radius: 32px;
    padding: 16px 32px;
}

@media screen and (max-width: 769px) {
    .searchEvents
        .searchEventsCard
        .input-group
        .input-group-prepend.button
        button.btn {
        padding: 16px 20px;
        font-size: 14px;
    }
}

.searchEvents #hidden-content {
    position: absolute;
    transition: all 1s ease-out;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.0509803922);
    border-radius: 20px;
    border-top: 0;
    z-index: 300 !important;
    margin: 0 auto !important;
    background-color: #fff;
    width: 100%;
    right: 0;
    left: 0;
    max-height: 400px;
    overflow: auto;
    padding: 21px 16px;
}

.searchEvents #hidden-content .searchItem {
    color: #14142b;
    font-weight: 600;
}

.searchEvents #hidden-content .searchItem .outercontent {
    border-bottom: 1px solid rgba(200, 187, 210, 0.2);
    padding: 16px 0;
    font-size: 16px;
    color: #a0a3bd;
}

.searchEvents #hidden-content .searchItem:last-child .outercontent {
    border-bottom: 0;
}

.searchEvents #hidden-content .searchItem ul {
    gap: 16px;
    align-items: center;
}

@media screen and (max-width: 769px) {
    .searchEvents #hidden-content .searchItem ul {
        display: block !important;
    }
}

.searchEvents #hidden-content .searchItem ul img {
    border-radius: 1rem;
    width: 100px;
    height: 70px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width: 769px) {
    .searchEvents #hidden-content .searchItem ul img {
        width: 90%;
        height: 100px;
        margin-bottom: 16px;
    }
}

.searchEvents #hidden-content .searchItem ul li {
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: normal;
    color: #14142b;
}

.searchEvents #hidden-content .searchItem ul li p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 10px;
}

.searchEvents #hidden-content .searchItem ul li i {
    color: #777e90;
    margin-left: 6px;
}

.searchEvents #hidden-content .searchItem ul li .infoEvent {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.noData {
    border: 1px solid #c2c2c2;
    margin: 10px 0;
    padding: 16px 16px;
    font-size: 18px;
    font-family: "Tajawal-Medium", sans-serif;
}

.editlinktable {
    font-size: 18px;
    color: #03a353;
}

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

.pagination ol {
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    margin: 24px 0;
}

.pagination ol li a {
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    line-height: 25px;
    color: #03a353;
    background: #fff;
    border: 1px solid #03a353;
}

.pagination ol li a.active {
    background: #03a353;
    color: #fff;
}

.status {
    font-family: "Tajawal-Medium", sans-serif;
    font-size: 16px;
}

.status.deny {
    color: #f44336;
}

.status.accept {
    color: #03a353;
}

.spanSelect {
    font-size: 15px;
    margin: 10px 0;
    display: block;
    text-align: left;
    color: #f44336;
    font-family: "Tajawal-Medium", sans-serif;
}

/*-----------------------
   Footer
-------------------------*/
footer .topFooter {
    padding: 48px 0 48px 0;
}

footer .topFooter .logoPart img {
    margin-bottom: 20px;
    display: block;
    width: 100px;
}

footer .topFooter .desPart p {
    font-size: 16px;
    line-height: 28px;
    color: #777e90;
    margin-bottom: 0;
    padding-left: 10%;
    margin-bottom: 16px;
}

footer .topFooter .titleFooter {
    font-size: 20px;
    color: #312e43;
    margin-bottom: 30px;
    font-family: "Tajawal-Bold", sans-serif;
}

footer .topFooter .input-group {
    background: #fff;
    border-radius: 50px;
    padding: 6px 6px;
    box-shadow: 0px 7px 14px 0px rgba(177, 177, 177, 0.4);
}

footer .topFooter .input-group input {
    border: 0;
    outline: 0;
    box-shadow: none !important;
    border-color: transparent !important;
    border: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent !important;
    padding-left: 25px;
}

footer .topFooter .input-group .btn-outline-secondary {
    background: #03a353;
    border: 1px solid #03a353;
    padding: 7px 25px;
    color: #fff;
    border-radius: 50px;
    font-size: 14px;
    line-height: 24px;
    font-family: "Tajawal-Bold", sans-serif;
}

footer .topFooter .twoColList {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

footer .topFooter .twoColList li {
    height: 100%;
}

footer .topFooter .twoColList li a {
    font-size: 16px;
    line-height: 24px;
    color: #777e90;
    display: block;
    margin-bottom: 16px;
    transition: all 1s ease-out;
}

footer .topFooter .twoColList li a:hover {
    color: #03a353;
    transform: scale(1.1);
}

footer .topFooter .socialmedia {
    display: flex;
    gap: 24px;
    align-items: center;
}

footer .topFooter .socialmedia li a {
    color: #03a353;
    font-size: 20px;
    transition: all 1s ease-out;
}

footer .topFooter .socialmedia li a:hover {
    color: #03a353;
    transform: scale(1.1);
}

footer .bottomFooter {
    padding: 24px 0 48px 0;
    border-top: 1px solid #e6e8ec;
    font-family: "Tajawal-Medium", sans-serif;
}

footer .bottomFooter ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

footer .bottomFooter ul p {
    color: #777e90;
    font-size: 16px;
    font-family: "Tajawal-Medium", sans-serif;
}

/*# sourceMappingURL=main.css.map */

body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #fff;
}

p {
    color: #b3b3b3;
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a {
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

a,
a:hover {
    text-decoration: none !important;
}

.content {
    padding: 7rem 0;
}

h2 {
    font-size: 20px;
}

.custom-control.teleport-switch {
    --color: #4cd964;
    padding-left: 0;
}

.custom-control.teleport-switch .teleport-switch-control-input {
    display: none;
}

.custom-control.teleport-switch
    .teleport-switch-control-input:checked
    ~ .teleport-switch-control-indicator {
    border-color: var(--color);
}

.custom-control.teleport-switch
    .teleport-switch-control-input:checked
    ~ .teleport-switch-control-indicator::after {
    left: -14px;
}

.custom-control.teleport-switch
    .teleport-switch-control-input:checked
    ~ .teleport-switch-control-indicator::before {
    right: 2px;
    background-color: var(--color);
}

.custom-control.teleport-switch
    .teleport-switch-control-input:disabled
    ~ .teleport-switch-control-indicator {
    opacity: 0.4;
}

.custom-control.teleport-switch .teleport-switch-control-indicator {
    display: inline-block;
    position: relative;
    margin: 0 10px;
    top: 4px;
    width: 32px;
    height: 20px;
    background: #fff;
    border-radius: 16px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 2px solid #ccc;
    overflow: hidden;
}

.custom-control.teleport-switch .teleport-switch-control-indicator::after {
    content: "";
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    top: 2px;
    left: 2px;
    background: #ccc;
}

.custom-control.teleport-switch .teleport-switch-control-indicator::before {
    content: "";
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    top: 2px;
    right: -14px;
    background: #ccc;
}

.dropzone {
    min-height: unset !important;
    border: unset !important;
}

.dropzone .dropzone-style {
    min-height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #4c246e80;
    border-radius: 16px;
    background-color: #4c246e0d;
    cursor: pointer;
    font-size: 0.875em;
}

.dropzone .dropzone-style .primary-text {
    color: #000;
}

.dropzone .dropzone-style .or-text {
    color: #a4a7ad;
}

.dropzone .dropzone-style .end-text {
    color: #4c246e;
}
.pagination {
    padding: 10px;
    gap: 12px;
}
.active > .page-link,
.page-link.active {
    background-color: #03a353 !important;

    border: none;
}
.page-link {
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 30px;
    color: #03a353;
}
.page-link[rel="next"],
.page-item:first-child .page-link {
    font-size: 30px;
    line-height: 22px;
}

.page-item {
    color: #03a353;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    text-align: center;
}
.active > .page-link {
    background-color: #03a353 !important;
}