@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Noto+Kufi+Arabic:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* font-family: "Cairo", sans-serif; */
/* font-family: 'Noto Kufi Arabic', sans-serif; */
:root {
    /* Typography */
    --font-body--family: "Cairo", sans-serif;
    --font-body--style: normal;
    --font-body--weight: 400;

    --font-heading--family: "Cairo", sans-serif;
    --font-heading--style: normal;
    --font-heading--weight: 600;

    --font-button--family: "Cairo", sans-serif;
    --font-button--style: normal;
    --font-button--weight: 600;

    /* h1-h6 */
    --font-h1--size: 60px;
    --font-h2--size: 48px;
    --font-h3--size: 36px;
    --font-h4--size: 24px;
    --font-h5--size: 20px;
    --font-h6--size: 16px;

    /* header nav */
    --font-nav-main: 16px;

    /* Colors */
    --color-background: rgba(255, 255, 255, 1);
    --color-foreground: rgba(28, 37, 57, 1);
    --color-foreground-heading: rgb(0 138 65);
    --color-foreground-subheading: rgba(93, 102, 111, 1);
    --color-background-subheading: rgba(255, 255, 255, 0.1);
    --color-border-subheading-bg: rgba(32, 40, 45, 0.1);
    --color-primary: rgba(28, 37, 57, 1);
    --color-primary-background: rgba(28, 37, 57, 1);
    --color-primary-hover: rgba(28, 37, 57, 1);
    --color-primary-background-hover: rgba(28, 37, 57, 1);
    --color-border: rgba(255, 255, 255, 0.2);
    --color-border-hover: rgba(93, 102, 111, 0.5);
    --color-shadow: rgba(0, 0, 0, 1);
    --color-overlay: rgba(28, 37, 57, 0.6);

    /* Buttons */
    --font-button-size: 16px;
    --font-button-size-mobile: 16px;
    --style-button-height: 56px;
    --style-button-height-mobile: 48px;
    --style-button-slim-height: 52px;
    --style-button-slim-height-mobile: 40px;
    --style-cta-underline-offset: 5px;
    --style-cta-underline-thickness: 1px;

    /* Colors - Primary Button */
    --color-primary-button-text: rgba(255, 255, 255, 1);
    --color-primary-button-background: rgba(32, 40, 45, 1);
    --color-primary-button-border: rgba(32, 40, 45, 1);
    --color-primary-button-icon: rgba(28, 37, 57, 1);
    --color-primary-button-icon-background: rgba(255, 255, 255, 1);

    --color-primary-button-hover-text: rgba(32, 40, 45, 1);
    --color-primary-button-hover-background: rgb(255, 255, 255, 1);
    --color-primary-button-hover-border: rgb(32, 40, 45, 1);
    --color-primary-button-hover-icon: rgba(255, 255, 255, 1);
    --color-primary-button-hover-icon-background: rgba(28, 37, 57, 1);

    /* Colors - Secondary Button */
    --color-secondary-button-text: rgba(32, 40, 45, 1);
    --color-secondary-button-background: rgba(255, 255, 255, 1);
    --color-secondary-button-border: rgba(255, 255, 255, 1);
    --color-secondary-button-icon: rgba(255, 255, 255, 1);
    --color-secondary-button-icon-background: rgba(32, 40, 45, 1);

    --color-secondary-button-hover-text: rgba(255, 255, 255, 1);
    --color-secondary-button-hover-background: rgba(32, 40, 45, 1);
    --color-secondary-button-hover-border: rgba(32, 40, 45, 1);
    --color-secondary-button-hover-icon: rgba(28, 37, 57, 1);
    --color-secondary-button-hover-icon-background: rgba(255, 255, 255, 1);

    /* Colors - Input */
    --color-input-background: rgba(255, 255, 255, 1);
    --color-input-text: rgba(93, 102, 111, 1);
    --color-input-border: rgba(93, 102, 111, 0.2);
    --color-input-hover-background: rgba(255, 255, 255, 1);
    --color-input-hover-text: rgba(93, 102, 111, 1);
    --color-input-hover-border: rgba(93, 102, 111, 0.2);

    /* Borders */
    --style-border-width-buttons-primary: 1px;
    --style-border-width-buttons-secondary: 1px;
    --style-border-radius-buttons-primary: 40px;
    --style-border-radius-buttons-secondary: 40px;

    --style-border-width-inputs: 1px;
    --style-border-radius-inputs: 8px;
    --style-border-width: 1px;

    /* Focus */
    --focus-outline-width: 1px;
    --focus-outline-offset: 3px;

    /* Pagination */
    --style-pagination-border-width: 1px;
    --pagination-item-foreground: rgba(28, 37, 57, 1);
    --pagination-item-background: rgba(242, 242, 242, 1);
    --pagination-item-border: rgba(242, 242, 242, 1);
    --pagination-item-active-foreground: rgba(255, 255, 255, 1);
    --pagination-item-active-background: rgba(28, 37, 57, 1);
    --pagination-item-active-border: rgba(28, 37, 57, 1);

    /* Swiper */
    --swiper-navigation-size: 14px;
    --swiper-navigation-color: rgba(28, 37, 57, 1);
    --swiper-navigation-background-color: rgba(242, 242, 242, 1);
    --swiper-navigation-hover-color: rgba(28, 37, 57, 1);
    --swiper-navigation-hover-background-color: transparent;
    --swiper-pagination-bullet-inactive-color: rgba(242, 242, 242);
    --swiper-pagination-color: rgba(28, 37, 57, 1);
    --swiper-pagination-bullet-inactive-opacity: 1;
}
p, h1, h2, h3, h4, h5, h6, blockquote {
    font-family: "Cairo", sans-serif !important;
}

.header-temp .weather > span {
    margin-left: unset !important;
    margin-right: 50px !important;
}

a.menu-link, .menu-link-main, .menu-accrodion {
    font-family: "Cairo", sans-serif !important;
    font-weight: 600 !important;
    font-size:16px !important;
}

.maps-marker-object .pulse {
        position: absolute;
        margin-top: 5px !important;
        margin-left: unset !important;
        margin-right: -8px !important;

}
.text-50 {
    font-size: 40px !important;
    line-height: 1.2;
}
.heading {
   /* color: rgb(0 138 65) !important;*/
}
.text-18 {
    font-family: "Cairo", sans-serif;
}
.button {
     /*   padding: 10px 30px 10px 10px;*/
}
.pagination-link svg {
    
    transform: scale(-1, 1) !important;
}
.blog-category svg {
    transform: scale(-1, 1) !important;
}
.button--cta svg {
    transform: scale(-1, 1) !important;
}

.card-blog .buttons svg {
    transform: scale(-1, 1) !important;
}
svg.icon-20 {
    transform: scale(-1, 1) !important;
}
.menu-open {
  transform: scale(-1, 1);
}
.breadcrumb svg {
    transform: scale(-1, 1);
}
drawer-opener svg {
    transform: scale(-1, 1);
}
.swiper-nav-inner svg {
    transform: scale(-1, 1);
}
.button--primary {
    padding: 10px 30px 10px 10px !important;
}
form.form-blog-search .button{
    padding: 10px !important;
}
.drawer-additional-menu .menu-link {
    padding: 5px 0;
    font-family: 'Cairo';
}
.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 1rem !important;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(0.75rem * var(--tw-space-x-reverse)0);
    margin-right: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}



@media (min-width: 768px) {
    .choose-media-absolute {

        right: unset !important;
        left: 0 !important;
    }
}



.running-content .content-link img {
    max-height: 60px !important;
}

@media (max-width: 767px) {
    :root {
        --font-h1--size: 48px;
        --font-h2--size: 40px;
        --font-h3--size: 28px;
        --font-h4--size: 20px;
        --font-h5--size: 18px;
        --swiper-navigation-size: 12px;
    }
}