﻿:root {
    /* Common transparent colors */
    --transparent-color: #ffffff00;
    --white-color: #ffffff;
    --black-color: #000000;
    /* Compatibility with old template */
    --theme-color-01: var(--as-green);
    --theme-color-02: var(--as-green-soft);
    --light-color: var(--as-cream);
    /* Fonts */

    --font-awesome: "Font Awesome 5 Pro", sans-serif;
    --font-barlow: "Barlow", sans-serif;
    --font-rajdhani: "Rajdhani", sans-serif;
    --font-cairo: "Cairo", sans-serif;
    /* Main brand */
    --as-green: #04543D;
    --as-green-dark: #01382B;
    --as-green-soft: #0A6A4E;
    /* Accent */
    --as-gold: #D6B56D;
    --as-gold-light: #E4C98A;
    /* Backgrounds */
    --as-cream: #FBFAF5;
    --as-mint: #EEF5F0;
    --as-white: #FFFFFF;
    --as-text: #16352D;
    --as-mint-hover: #EEF5F0;
    /* Text / borders */
    --as-text-dark: #16352D;
    --as-border: #E3E8E2;
    --as-card-shadow: 0 8px 24px rgba(1, 56, 43, 0.06);
    --as-card-shadow-hover: 0 18px 42px rgba(1, 56, 43, 0.16);
}



html {
    position: absolute;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    font-family: var(--font-barlow);
    color: var(--black-color);
    background-color: var(--white-color);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100%;
    direction: ltr;
}

a,
a:focus,
a:hover {
    text-decoration: none !important;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

ul {
    padding: 0;
    margin-bottom: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-rajdhani);
    font-weight: 700;
}

p {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1320px;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }
}

::selection {
    background: var(--theme-color-01);
    color: var(--white-color);
}

.lang-en {
    font-family: var(--font-barlow);
}

.lang-ar {
    font-family: var(--font-cairo);
}

.dir-num {
    direction: ltr;
    text-align: left;
}

.lang-body-en .langx-en {
    display: none !important;
}

.lang-body-ar .langx-ar {
    display: none !important;
}

/****** Preloader ******/

.preloader {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--white-color);
    z-index: 9999;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1);
}

    .preloader img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: 4.5rem;
        border: none;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .preloader .three-quarter-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3.5rem;
        height: 3.5rem;
        border: .25rem solid var(--theme-color-02);
        border-top: .25rem solid transparent;
        border-radius: var(--border-radius-02);
        animation: spin .5s linear 0s infinite;
        margin-left: -1.75rem;
        margin-top: 3rem;
    }

    .preloader.loaded {
        width: 0;
        left: -25%;
    }

        .preloader.loaded img {
            opacity: 0;
            -webkit-transition: all 1.5s ease-in-out;
            -o-transition: all 1.5s ease-in-out;
            transition: all 1.5s ease-in-out;
            transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .preloader.loaded .three-quarter-spinner {
            opacity: 0;
            -webkit-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }

@media (max-width: 570px) {
    .preloader img {
        width: 16rem;
    }
}


@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}





/****** Main ******/

main {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 1;
}

.bg-white {
    background-color: var(--white-color);
}

.bg-black {
    background-color: var(--black-color);
}

.bg-gray {
    background-color: var(--gray-color) !important;
}

.bg-gray-04 {
    background-color: var(--gray-color);
}

.bg-theme-01 {
    background-color: var(--theme-color);
}

.text-black {
    color: var(--black-color) !important;
}



/****** Jssocials Shares ******/

.share-sec {
    display: inline-block;
    font-size: 1.5rem;
    position: relative;
    top: 1.125rem;
    margin-right: 1.25rem;
    color: var(--theme-color-02);
}

#shareRoundIcons {
    display: inline-block;
}

.jssocials-shares {
    margin: 0;
    display: inline-block;
}

.jssocials-share {
    display: inline-block;
    vertical-align: top;
    margin: 0 1rem 0 0;
}

    .jssocials-share:last-child {
        margin: 0;
    }

.jssocials-share-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1;
}

.jssocials-share-logo, .jssocials-share-logo:focus {
    width: 3rem;
    height: 3rem;
    vertical-align: middle;
    font-size: 1rem;
    color: var(--white-color);
    background-color: var(--theme-color-01);
    line-height: 3rem;
    border-radius: var(--border-radius-03);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

    .jssocials-share-logo:hover {
        color: var(--white-color);
        background-color: var(--theme-color-02);
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

@media (max-width: 570px) {
    .share-sec {
        font-size: 1.25rem;
        top: .875rem;
        margin-right: 1rem;
    }

    .jssocials-share {
        margin: 0 .5rem 0 0;
    }

    .jssocials-share-logo, .jssocials-share-logo:focus {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
        line-height: 3rem;
    }
}



/* =========================================================
   Arabic / RTL overrides
   تم استخراج الاختلافات من style-ar.css وإضافتها فوق الأساس الإنجليزي
   Works with: <html dir="rtl"> or <body class="lang-body-ar">
   ========================================================= */

html[dir="rtl"],
body.lang-body-ar {
    --font-barlow: "Cairo", sans-serif;
    --font-rajdhani: "Cairo", sans-serif;
}

    html[dir="rtl"] body,
    body[dir="rtl"],
    body.lang-body-ar {
        right: 0;
        direction: rtl;
    }

        html[dir="rtl"] .dir-num,
        body.lang-body-ar .dir-num {
            text-align: right;
        }

        html[dir="rtl"] header .header-cus .navbar-expand-lg .navbar-nav .nav-link,
        body.lang-body-ar header .header-cus .navbar-expand-lg .navbar-nav .nav-link,
        html[dir="rtl"] header .header-cus .navbar-expand-lg .navbar-nav .nav-link:focus,
        body.lang-body-ar header .header-cus .navbar-expand-lg .navbar-nav .nav-link:focus {
            margin-left: 1rem;
            margin-right: 0;
        }

        html[dir="rtl"] header.headroom--not-top .header-cus .navbar-expand-lg .navbar-nav .nav-link,
        body.lang-body-ar header.headroom--not-top .header-cus .navbar-expand-lg .navbar-nav .nav-link,
        html[dir="rtl"] header.headroom--not-top .header-cus .navbar-expand-lg .navbar-nav .nav-link:focus,
        body.lang-body-ar header.headroom--not-top .header-cus .navbar-expand-lg .navbar-nav .nav-link:focus {
            margin-left: 1rem;
            margin-right: 0;
        }

        html[dir="rtl"] header .header-cus .navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link,
        body.lang-body-ar header .header-cus .navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link {
            margin-left: 0;
        }

        html[dir="rtl"] header .navbar-expand-lg .navbar-nav .nav-link,
        body.lang-body-ar header .navbar-expand-lg .navbar-nav .nav-link,
        html[dir="rtl"] header .navbar-expand-lg .navbar-nav .nav-link:focus,
        body.lang-body-ar header .navbar-expand-lg .navbar-nav .nav-link:focus {
            margin-left: 2.5rem;
            margin-right: 0;
        }

        html[dir="rtl"] header .navbar-expand-lg .navbar-nav .nav-item.last-child .nav-link,
        body.lang-body-ar header .navbar-expand-lg .navbar-nav .nav-item.last-child .nav-link,
        html[dir="rtl"] header .navbar-expand-lg .navbar-nav .nav-item.last-child .nav-link:focus,
        body.lang-body-ar header .navbar-expand-lg .navbar-nav .nav-item.last-child .nav-link:focus {
            margin-left: 0;
        }

        html[dir="rtl"] .header-info,
        body.lang-body-ar .header-info {
            padding: 0 0 0 2.5rem;
        }

            html[dir="rtl"] .header-info i,
            body.lang-body-ar .header-info i {
                margin-left: 1rem;
            }

        html[dir="rtl"] header.headroom--not-top .header-info,
        body.lang-body-ar header.headroom--not-top .header-info {
            padding: 0 0 0 2.5rem;
        }

            html[dir="rtl"] header.headroom--not-top .header-info i,
            body.lang-body-ar header.headroom--not-top .header-info i {
                margin-left: 1rem;
            }

        html[dir="rtl"] footer .footer-about .logo-footer,
        body.lang-body-ar footer .footer-about .logo-footer {
            margin-left: 2rem;
        }

        html[dir="rtl"] footer .footer-about p.footer-pra,
        body.lang-body-ar footer .footer-about p.footer-pra {
            padding-left: 2rem;
        }

        html[dir="rtl"] footer .footer-contact .contact-item a,
        body.lang-body-ar footer .footer-contact .contact-item a,
        html[dir="rtl"] footer .footer-contact .contact-item a:focus,
        body.lang-body-ar footer .footer-contact .contact-item a:focus {
            margin-right: 2.5rem;
        }

        html[dir="rtl"] footer .footer-contact .follow-us span,
        body.lang-body-ar footer .footer-contact .follow-us span {
            margin-left: .75rem;
        }

        html[dir="rtl"] footer .footer-contact .follow-us .social .footer-social-link,
        body.lang-body-ar footer .footer-contact .follow-us .social .footer-social-link,
        html[dir="rtl"] footer .footer-contact .follow-us .social .footer-social-link:focus,
        body.lang-body-ar footer .footer-contact .follow-us .social .footer-social-link:focus {
            margin-left: 1.25rem;
        }

            html[dir="rtl"] footer .footer-contact .follow-us .social .footer-social-link:last-child,
            body.lang-body-ar footer .footer-contact .follow-us .social .footer-social-link:last-child {
                margin-left: 0;
            }

        html[dir="rtl"] footer .footer-title::after,
        body.lang-body-ar footer .footer-title::after {
            right: 0;
        }

        html[dir="rtl"] footer .footer-links ul,
        body.lang-body-ar footer .footer-links ul {
            padding-right: 0;
        }

        html[dir="rtl"] footer .footer-links a,
        body.lang-body-ar footer .footer-links a,
        html[dir="rtl"] footer .footer-links a:focus,
        body.lang-body-ar footer .footer-links a:focus {
            padding-right: 1rem;
        }

            html[dir="rtl"] footer .footer-links a:hover,
            body.lang-body-ar footer .footer-links a:hover,
            html[dir="rtl"] footer .footer-links a.active,
            body.lang-body-ar footer .footer-links a.active {
                padding-right: 1.5rem;
            }

            html[dir="rtl"] footer .footer-links a::before,
            body.lang-body-ar footer .footer-links a::before {
                right: 0;
            }

        html[dir="rtl"] .section-cus-03,
        body.lang-body-ar .section-cus-03 {
            padding: 2rem 0 0 0;
        }

        html[dir="rtl"] .page-title .page-title-name,
        body.lang-body-ar .page-title .page-title-name {
            font-size: 3rem;
        }

        html[dir="rtl"] .page-title .page-title-links a,
        body.lang-body-ar .page-title .page-title-links a,
        html[dir="rtl"] .page-title .page-title-links a:focus,
        body.lang-body-ar .page-title .page-title-links a:focus {
            margin-left: .25rem;
        }

            html[dir="rtl"] .page-title .page-title-links a::after,
            body.lang-body-ar .page-title .page-title-links a::after {
                content: "";
                margin-right: .5rem;
            }

        html[dir="rtl"] .page-title .page-title-links span,
        body.lang-body-ar .page-title .page-title-links span {
            margin-left: .25rem;
        }

            html[dir="rtl"] .page-title .page-title-links span::after,
            body.lang-body-ar .page-title .page-title-links span::after {
                content: "";
                margin-right: .5rem;
            }

        html[dir="rtl"] .home-slide .carousel-control-next,
        body.lang-body-ar .home-slide .carousel-control-next {
            left: 5%;
            right: auto;
        }

        html[dir="rtl"] .home-slide .carousel-control-prev,
        body.lang-body-ar .home-slide .carousel-control-prev {
            right: 5%;
            left: auto;
        }

        html[dir="rtl"] .homeswiper-01 .swiper-button-prev,
        body.lang-body-ar .homeswiper-01 .swiper-button-prev,
        html[dir="rtl"] .homeswiper-01.swiper-container-rtl .swiper-button-next,
        body.lang-body-ar .homeswiper-01.swiper-container-rtl .swiper-button-next {
            left: auto;
            right: 45%;
        }

        html[dir="rtl"] .homeswiper-01 .swiper-button-next,
        body.lang-body-ar .homeswiper-01 .swiper-button-next,
        html[dir="rtl"] .homeswiper-01.swiper-container-rtl .swiper-button-prev,
        body.lang-body-ar .homeswiper-01.swiper-container-rtl .swiper-button-prev {
            right: auto;
            left: 45%;
        }

        html[dir="rtl"] .homeswiper-02 .swiper-button-prev,
        body.lang-body-ar .homeswiper-02 .swiper-button-prev,
        html[dir="rtl"] .homeswiper-02.swiper-container-rtl .swiper-button-next,
        body.lang-body-ar .homeswiper-02.swiper-container-rtl .swiper-button-next {
            left: auto;
            right: 45%;
        }

        html[dir="rtl"] .homeswiper-02 .swiper-button-next,
        body.lang-body-ar .homeswiper-02 .swiper-button-next,
        html[dir="rtl"] .homeswiper-02.swiper-container-rtl .swiper-button-prev,
        body.lang-body-ar .homeswiper-02.swiper-container-rtl .swiper-button-prev {
            right: auto;
            left: 45%;
        }

        html[dir="rtl"] .section-full-01,
        body.lang-body-ar .section-full-01 {
            background-position: 70% 50%;
        }

        html[dir="rtl"] .widget .widget-title,
        body.lang-body-ar .widget .widget-title {
            right: -1rem;
        }

        html[dir="rtl"] .form-outline .invalid-feedback,
        body.lang-body-ar .form-outline .invalid-feedback,
        html[dir="rtl"] .error,
        body.lang-body-ar .error {
            left: .25rem;
        }

        html[dir="rtl"] .uf-filter .uf-tags li,
        body.lang-body-ar .uf-filter .uf-tags li {
            margin-right: 0 !important;
            margin-left: 10px !important;
        }

        html[dir="rtl"] .uf-sort-box .uf-select span,
        body.lang-body-ar .uf-sort-box .uf-select span {
            padding: .5rem .5rem .5rem 1rem !important;
            float: right !important;
        }

        html[dir="rtl"] .uf-sort-box .uf-order,
        body.lang-body-ar .uf-sort-box .uf-order {
            float: right !important;
            margin: 12px 10px 0 0 !important;
        }

        html[dir="rtl"] .uf-sort-box .uf-options,
        body.lang-body-ar .uf-sort-box .uf-options {
            right: 0 !important;
        }

        html[dir="rtl"] .uf-search input,
        body.lang-body-ar .uf-search input {
            padding: .5rem .5rem .5rem 2rem !important;
        }

        html[dir="rtl"] .uf-search-box .uf-reset,
        body.lang-body-ar .uf-search-box .uf-reset {
            right: auto !important;
            left: 10px !important;
        }

        html[dir="rtl"] .uf-sort-box .uf-select span:after,
        body.lang-body-ar .uf-sort-box .uf-select span:after {
            right: auto !important;
            left: 1rem !important;
        }

@media (max-width: 990px) {
    html[dir="rtl"] header .header-cus,
    body.lang-body-ar header .header-cus {
        border-bottom: none;
    }

    html[dir="rtl"] header .navbar-toggler,
    body.lang-body-ar header .navbar-toggler {
        left: .5rem;
    }

    html[dir="rtl"] .side-menu .side-menu-info i,
    body.lang-body-ar .side-menu .side-menu-info i {
        margin-left: 1rem;
    }

    html[dir="rtl"] footer .footer-about .logo-footer,
    body.lang-body-ar footer .footer-about .logo-footer {
        height: 6rem;
    }

    html[dir="rtl"] footer .footer-about p.footer-pra,
    body.lang-body-ar footer .footer-about p.footer-pra {
        padding-left: 2rem;
    }

    html[dir="rtl"] footer .footer-about .logo-footer,
    body.lang-body-ar footer .footer-about .logo-footer {
        margin-left: 0;
    }

    html[dir="rtl"] .page-title .page-title-name,
    body.lang-body-ar .page-title .page-title-name {
        font-size: 3rem;
    }

  
}

@media (max-width: 570px) {
    html[dir="rtl"] header .header-cus .navbar-expand-lg .navbar-nav .nav-link,
    body.lang-body-ar header .header-cus .navbar-expand-lg .navbar-nav .nav-link {
        margin-left: 2rem;
        font-size: .75rem;
    }

   
}
