/* باريكس - Html Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header
5. Main Slider
6. Services Section
7. Welcome Section
8. Appointment Section
9. Team Section
10. Counter Section
11. Price Section
12. Fluid Section
13. Testimonials Section
14. News Section
15. Main Footer
16. Mission Section
17. Gallery Section
18. Subscribe Section
19. Products Section
20. Time CountDown Section
21. Page Title


**********************************************/
/* Arabic + Latin fallbacks (fast) */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=Changa:wght@600;700&display=swap");


@import url("flaticon.css");







/***

====================================================================
	Index 5 style
====================================================================

***/

/* Global Variables */

:root {
    --brand-blue: #0192dc;
    --brand-blue-dark: #0077b3;
    --brand-gold: #e5a62d;

    --wa-green: #25D366;
    --text: #2d3748;
    --muted: #64748b;
    --bg: #f8fafc;
    --card: #ffffff;
    --border: #e5e7eb;
    --border-soft: #e9ecef;
    --radius-xl: 22px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
    --shadow-hover: 0 14px 28px rgba(0,0,0,.08);
    --font-body: "Almarai","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    --font-head: "Changa","Almarai","Noto Kufi Arabic",var(--font-body);
    --font-latin: "Inter","Montserrat","Open Sans",Arial,sans-serif;
    --st_blue: var(--brand-blue);
    --st_orange: var(--brand-gold);
    --pt_yellow: var(--brand-gold);
    --pt_orange: #e7470c;
    --pt_white: var(--card);
    --pt_nwhite: var(--border);
    --pt_pattern: var(--bg);
    --pt_black: var(--text);
    --pt_grey: var(--muted);
    --pt_font_1: var(--font-head);
    --pt_font_2: var(--font-body);
    --pt_font_latin: var(--font-latin);
    --color-primary: var(--brand-blue);
    --color-primary-dark: var(--brand-blue-dark);
    /* --color-primary-light: var(--brand-blue); */
    /* --color-accent: var(--brand-gold);
    --color-accent-dark: var(--brand-gold);
    --color-accent-light: var(--brand-gold); */
    --color-white: var(--card);
    --color-off-white: var(--bg);
    --color-light-gray: var(--border);
    --color-gray: var(--muted);
    --color-dark-gray: var(--text);
    --color-black: var(--text);
    --color-text: var(--text);
    --color-text-light: var(--muted);
    --color-text-muted: var(--muted);
    --color-bg: var(--card);
    --color-bg-light: var(--bg);
    --color-bg-dark: var(--text);
    --color-border: var(--border);
    --color-border-light: var(--border-soft);
    --color-border-dark: var(--border);
    --spacing-base: 8px;
    --spacing-0: 0;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --radius-base: 8px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-base: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
}


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

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


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

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}


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

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


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

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/* Global */

* {
    border: none;
    outline: none;
    direction: rtl;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
/***

====================================================================
	Global Settings
====================================================================

 ***/

/*
    html[dir="rtl"]
*/

body {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8em;
    font-weight: 400;
    background: var(--card);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-body);
    direction: rtl;
}


a {
    text-decoration: none;
    cursor: pointer;
    color: var(--brand-blue);
}


a:hover, a:focus, a:visited {
    text-decoration: none;
    outline: none;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
    font-weight: normal;
    margin: 0px;
    background: none;
    line-height: 1.6em;
    font-family: var(--font-head);
}


input, button, select {

}


textarea {
    overflow: hidden;
}


p, .text {
    position: relative;
    line-height: 1.8em;
    font-family: var(--font-body);
}


.strike-through {
    text-decoration: line-through;
}


.auto-container {
    position: static;
    max-width: 1200px;
    padding: 0px 15px;
    margin: 0 auto;
}


.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
}



/*List Style One*/

.list-style-one {
    position: relative;
}


.list-style-one li {
    position: relative;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    padding-right: 25px;
    margin-bottom: 6px;
}


.list-style-one li:before {
    position: absolute;
    content: "";
    right: 0px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--brand-blue);
}


.list-style-one li:after {
    position: absolute;
    content: "";
    right: 3px;
    top: 11px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--brand-blue);
}


.list-style-one.style-two li {
    color: var(--card);
}


.list-style-one.style-two li:before, .list-style-one.style-two li:after {
    border-color: var(--card);
}


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


.theme-btn {
    display: inline-block;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}



/*Btn Style One*/

.btn-style-one {
    position: relative;
    line-height: 29px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    background-color: var(--card);
    border: 2px solid var(--card);
    padding: 4px 29px 4px 29px;
}


.btn-style-one:hover {
    color: var(--card);
    background: none;
}


/*Btn Style Two*/

.btn-style-two {
    position: relative;
    padding: 11px 32px;
    line-height: 29px;
    color: var(--card);
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background-color: var(--brand-gold);
    border: 2px solid var(--brand-gold);
}


.btn-style-two:hover {
    background: none;
    color: var(--brand-gold);
}


/*Btn Style Three*/

.btn-style-three {
    position: relative;
    padding: 11px 39px;
    line-height: 29px;
    color: var(--card);
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background-color: var(--brand-blue);
    border: 2px solid var(--brand-blue);
}


.btn-style-three:hover {
    background: none;
    color: var(--brand-blue);
}


/*Btn Style Four*/

.btn-style-four {
    position: relative;
    padding: 11px 39px;
    line-height: 29px;
    color: var(--brand-gold);
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    /* background-color: var(--brand-gold); */
    border: 2px solid var(--brand-gold);
}


.btn-style-four:hover {
    background: var(--brand-gold);
    color: var(--card);
}


/*Btn Style Five*/

.btn-style-five {
    position: relative;
    padding: 11px 39px;
    line-height: 29px;
    color:  var(--pt_orange);
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    /* background-color: var(--pt_orange); */
    border: 2px solid var(--pt_orange);
}


.btn-style-five:hover {
    background:  var(--pt_orange);
    color: var(--card);
}


/*Btn Style Six*/

.btn-style-six {
    position: relative;
    padding: 11px 40px;
    line-height: 29px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: none;
    border: 2px solid var(--text);
}


.btn-style-six:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--card);
}


/*Btn Style Seven*/

.btn-style-seven {
    position: relative;
    padding: 9px 40px;
    line-height: 29px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: none;
    text-transform: uppercase;
    border: 2px solid var(--text);
}


.btn-style-seven:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--card);
}


/*Btn Style Eight*/

.btn-style-eight {
    position: relative;
    padding: 6px 24px;
    line-height: 29px;
    color: var(--card);
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: none;
    text-transform: uppercase;
    border: 2px solid var(--border-soft);
}


.btn-style-eight:hover {
    background: var(--card);
    border-color: var(--card);
    color: var(--brand-blue);
}


/*Btn Style Nine*/

.btn-style-nine {
    position: relative;
    padding: 9px 32px;
    line-height: 29px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: none;
    text-transform: uppercase;
    border: 2px solid var(--text);
}


.btn-style-nine:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--card);
}



img {
    display: inline-block;
    max-width: 100%;
}


.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background-color: var(--card);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../images/icons/preloader.gif);
    background-size: 100px;
}


/***

====================================================================
	Scroll To Top style
====================================================================

***/

.scroll-to-top {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 70px;
    color: var(--card);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 65px;
    text-align: center;
    z-index: 99999;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--brand-blue);
    display: none;
    border: 2px solid var(--brand-blue);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}


.scroll-to-top:hover {
    color: var(--card);
}


/***

====================================================================
	Main Header style
====================================================================

***/

.main-header {
    position: relative;
    z-index: 99;
    width: 100%;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    background: var(--card);
}


/*Sticky Header*/

.sticky-header {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    left: 0px;
    top: 0px;
    width: 100%;
    padding: 0px 0px;
    background: var(--card);
    z-index: 0;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}



.fixed-header .sticky-header {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    border-bottom: 1px solid var(--border-soft);
    -ms-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -op-animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -ms-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    -op-animation-duration: 500ms;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -op-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -op-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}


.sticky-header .logo {
    padding: 6px 0px 4px;
}


.main-header .sticky-header .outer-box {
    margin-top: 20px;
}


.main-header .sticky-header .search-box-outer .dropdown-menu {
    top: 46px;
}



.main-header .header-upper {
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    background: var(--card);
    margin-top: -1px;
}


.main-header .header-upper .logo img {
    position: relative;
    display: inline-block;
    max-width: 100%;
}


.main-header .logo-outer {
    position: relative;
    z-index: 25;
    padding: 20px 0px;
}


.main-header .logo-outer .logo img {
    position: relative;
    display: inline-block;
    max-width: 100%;
}


.main-header .header-upper .upper-right {
    position: relative;
}



.main-header .nav-outer {
    position: relative;
}


.main-menu {
    position: relative;
    padding: 0px;
    float: left;
}


.main-menu .navbar-collapse {
    padding: 0px;
}


.main-menu .navigation {
    position: relative;
    margin: 0px;
}


.main-menu .navigation>li {
    position: relative;
    float: right;
    margin-left: 32px;
}


.main-menu .navigation>li:first-child {
    margin-right: 0px;
}


.main-header .sticky-header .main-menu .navigation>li {
    margin: 0px;
    border: 0px;
    margin-left: 30px;
}


.main-menu .navigation>li>a {
    position: relative;
    display: block;
    font-size: 16px;
    color: var(--text);
    line-height: 30px;
    font-weight: 700;
    opacity: 1;
    text-transform: uppercase;
    padding: 32px 0px 38px 0px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.header-style-two .main-menu .navigation>li>a {
    text-transform: capitalize;
}


.main-header .sticky-header .main-menu .navigation>li>a {
    color: var(--text);
    padding: 20px 0px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 700;
    min-height: 0px;
    background: none;
    border: 0px;
}


.main-menu .navigation>li:hover>a, .main-menu .navigation>li.current>a, .main-menu .navigation>li.current-menu-item>a {
    color: var(--brand-gold);
    opacity: 1;
}


.main-header .sticky-header .main-menu .navigation>li:hover>a, .main-header .sticky-header .main-menu .navigation>li.current>a, .main-header .sticky-header .main-menu .navigation>li.current-menu-item>a {
    color: var(--brand-blue);
    opacity: 1;
}


.main-menu .navigation>li:hover>a:after {
    opacity: 1;
}


.main-header .sticky-header .main-menu .navigation>li>ul:before {
    display: none;
}


.main-header .sticky-header .main-menu .navigation>li>ul {
    top: 100% !important;
}


.main-menu .navigation>li>ul {
    position: absolute;
    right: 0px;
    top: 100%;
    width: 220px;
    z-index: 100;
    display: none;
    background: var(--bg);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}



.main-menu .navigation>li>ul>li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--border);
}


.main-menu .navigation>li>ul>li:last-child {
    border-bottom: none;
}


.main-menu .navigation>li>ul>li>a {
    position: relative;
    display: block;
    padding: 13px 40px;
    line-height: 24px;
    font-weight: 500;
    font-size: 15px;
    color: var(--text);
    text-align: right;
    padding-left: 0px !important;
    text-transform: capitalize;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.main-menu .navigation>li>ul>li>a:before {
    position: absolute;
    content: "";
    right: 27px;
    top: 50%;
    width: 7px;
    height: 1px;
    background-color: var(--text);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    font-family: "FontAwesome";
}


.main-menu .navigation>li>ul>li:hover>a:before {
    background-color: var(--card);
}


.main-menu .navigation>li>ul>li:hover>a {
    background-color: var(--brand-blue);
    color: var(--card);
}


.main-menu .navigation>li>ul>li>ul {
    position: absolute;
    right: 100%;
    top: 100%;
    width: 220px;
    z-index: 100;
    display: none;
    background: var(--bg);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}


.main-menu .navigation>li>ul>li>ul:before {
    position: absolute;
    content: "";
    right: 100%;
    top: 0px;
    width: 20px;
    height: 100%;
}


.main-menu .navigation>li>ul>li>ul>li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--border);
}


.main-menu .navigation>li>ul>li>ul>li:last-child {
    border-bottom: none;
}


.main-menu .navigation>li>ul>li>ul>li>a {
    position: relative;
    display: block;
    padding: 13px 40px;
    line-height: 24px;
    font-weight: 500;
    font-size: 15px;
    color: var(--text);
    text-align: right;
    padding-left: 0px !important;
    text-transform: capitalize;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.main-menu .navigation>li>ul>li>ul>li>a:before {
    position: absolute;
    content: "";
    right: 27px;
    top: 50%;
    width: 7px;
    height: 1px;
    background-color: var(--text);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    font-family: "FontAwesome";
}


.main-menu .navigation>li>ul>li>ul>li:hover>a:before {
    background-color: var(--card);
}


.main-menu .navigation>li>ul>li>ul>li>a:hover {
    background-color: var(--brand-blue);
    color: var(--card);
}


.sticky-header .main-menu .navigation>li>a:after {
    display: none;
}


.main-menu .navigation>li.dropdown:hover>ul {
    visibility: visible;
    opacity: 1;
}


.main-menu .navigation li>ul>li.dropdown:hover>ul {
    visibility: visible;
    opacity: 1;
    right: 100%;
    top: 0%;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
    position: absolute;
    left: 10px;
    top: 6px;
    width: 34px;
    height: 30px;
    border: 1px solid var(--card);
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    color: var(--card);
    cursor: pointer;
    z-index: 5;
    display: none;
}


.main-header .outer-box {
    position: relative;
    float: left;
    margin-right: 22px;
    margin-top: 32px;
}


.main-header .outer-box .btn-box {
    position: relative;
    float: right;
    margin-left: 42px;
    margin-top: -10px;
}


.main-header .outer-box .btn-box .theme-btn {
    font-size: 16px;
    font-weight: 700;
    padding: 9px 39px;
}


.main-header .outer-box .btn-box .theme-btn .icon {
    margin-right: 8px;
    font-size: 18px;
}


.main-header .outer-box .social-links-box {
    position: relative;
    float: right;
    margin-left: 20px;
}



.header-top {
    position: relative;
    padding: 1px 0px 1px;
    background-color: var(--brand-blue);
}


html[dir="rtl"] .header-top .top-inner {
    position: relative;
}


html[dir="rtl"] .header-top .top-left {
    position: relative;
    float: right;
}


html[dir="rtl"] .header-top .top-left ul li {
    position: relative;
    font-size: 15px;
    color: var(--card);
    font-weight: 500;
    margin-right: 30px;
    display: inline-block;
}


html[dir="rtl"] .header-top .top-left ul li a {
    font-size: 15px;
    font-weight: 400;
    color: var(--card);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}


html[dir="rtl"] .header-top .top-left ul li .icon {
    position: absolute;
    color: var(--card);
    font-size: 16px;
    line-height: 1em;
    top: 4px;
    right: -20px;
}


html[dir="rtl"] .header-top .top-right {
    position: relative;
    float: left;
}



/*Social Icons*/

.header-top .social-icon {
    position: relative;
    float: left;
    margin-top: 10px;
}


.header-top .social-icon li {
    position: relative;
    float: left;
    margin-left: 18px;
}


.header-top .social-icon li a {
    position: relative;
    display: block;
    line-height: 1em;
    font-size: 16px;
    color: var(--card);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.header-top .social-icon li a:hover {
    color: var(--card);
}


.header-top-two {
    position: relative;
    padding: 10px 0px;
    text-align: center;
    background-color: var(--muted);
}


.header-top-two .text {
    position: relative;
    color: var(--card);
    font-size: 13px;
    font-weight: 400;
    padding-left: 25px;
    display: inline-block;
}


.header-top-two .text:before {
    position: absolute;
    content: "";
    left: 0px;
}


.header-top .top-right>ul>li>a>.icon {
    position: relative;
    top: 1px;
    font-size: 15px;
    color: var(--brand-blue);
    margin-right: 8px;
}


/*search box btn*/

.main-header .search-box-outer {
    position: relative;
    left: 3px;
    display: inline-block;
}


.main-header .search-box-btn {
    position: relative;
    font-size: 18px;
    line-height: 1em;
    color: var(--text);
    cursor: pointer;
    display: inline-block;
    background: none;
    z-index: 99;
}


.main-header .search-box-outer .dropdown-menu {
    top: 64px;
    padding: 0px;
    width: 280px;
    border-radius: 0px;
}


.main-header .info-box {
    position: relative;
    float: left;
    margin-left: 30px;
    font-size: 13px;
    color: var(--muted);
    text-align: left;
    padding: 0px 0px 0px 50px;
}


.main-header .info-box:first-child {
    padding-right: 30px;
    border-right: 1px solid var(--border);
}


.main-header .info-box:last-child {
    padding-right: 0px;
    margin-left: 0px;
    top: -2px;
}


.main-header .info-box .icon-box {
    position: absolute;
    left: 0px;
    top: 6px;
    color: var(--brand-blue);
    font-size: 26px;
    text-align: left;
    line-height: 1.2em;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}


.main-header .info-box li {
    position: relative;
    line-height: 20px;
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 3px;
    font-weight: 500;
}


.main-header .info-box strong {
    font-weight: 500;
    color: var(--text);
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}


/*Social Icon One*/

.social-icon-one {
    position: relative;
}


/*Social Icon Four*/

.social-icon-four {
    position: relative;
}


.social-icon-four .share {
    position: relative;
    color: var(--muted);
    font-weight: 600;
    margin-right: 5px;
    text-transform: uppercase;
}


.social-icon-four a {
    position: relative;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    line-height: 32px;
    margin-right: 8px;
    background-color: var(--border-soft);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}


.social-icon-four a:hover {
    background-color: var(--brand-blue);
    color: var(--card);
}


/*Custom Select*/

.form-group .ui-selectmenu-button.ui-button {
    width: 100%;
    font-size: 14px;
    font-style: normal;
    height: 48px;
    padding: 10px 20px;
    line-height: 26px;
    color: var(--text);
    float: left;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--card);
}


.form-group .ui-button .ui-icon {
    background: none;
    position: relative;
    top: 0px;
    text-indent: 0px;
    color: var(--text);
}


.ui-state-active, .ui-widget-content .ui-state-active {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}


/***

====================================================================
	Featured Section
====================================================================

***/

.featured-section {
    position: relative;
    padding: 60px 0px 60px;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
}


.featured-block {
    position: relative;
    margin-bottom: 40px;
}


.featured-block .inner-box {
    position: relative;
    padding: 30px 30px;
    background-color: var(--card);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 1);
}


.featured-block .inner-box .content {
    position: relative;
}


.featured-block .inner-box .content .icon-box {
    color: var(--brand-blue);
    line-height: 1em;
    font-size: 50px;
}


.featured-block:nth-child(2) .inner-box .content .icon-box {
    color: var(--brand-gold);
}


.featured-block:nth-child(3) .inner-box .content .icon-box {
    color: var(--pt_orange);
}


.featured-block .inner-box .content h3 {
    position: relative;
    font-size: 24px;
    font-weight: 300;
    text-transform: capitalize;
}


.featured-block .inner-box .content h3 a {
    position: relative;
    color: var(--text);
}


.featured-block .inner-box .content .text {
    position: relative;
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
}


/***

====================================================================
	Services Section
====================================================================

***/

/***

====================================================================
	Counter Section
====================================================================

***/

.counter-section {
    position: relative;
    padding: 80px 0px 60px;
}


.counter-section .image-layer {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    width: 100%;
    height: 420px;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}


.counter-section .image-layer:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #0000009c;
}


.counter-section .image-layer:after {
    position: absolute;
    content: "";
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 82px;
}


.counter-section h2 {
    position: relative;
    font-size: 50px;
    text-align: center;
    color: var(--card);
    margin-bottom: 70px;
    text-transform: capitalize;
}


.counter-section h2 span {
    font-weight: 300;
    display: block;
}


.counter-section .counter-box {
    position: relative;
    padding: 60px 0px 30px;
    text-align: center;
    background-color: var(--card);
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(230, 230, 230, 1);
    -moz-box-shadow: 0px 0px 25px 0px rgba(230, 230, 230, 1);
    box-shadow: 0px 0px 25px 0px rgba(230, 230, 230, 1);
}


/*Fact Counter*/

.fact-counter {
    position: relative;
}


.fact-counter .column {
    position: relative;
    z-index: 5;
    margin-bottom: 25px;
}


.fact-counter .column .inner {
    position: relative;
    top: 0;
    text-align: center;
    padding: 0px 0px 0px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.fact-counter .column .inner .icon {
    position: relative;
}


.fact-counter .column .inner .icon-box {
    position: relative;
    color: var(--brand-gold);
    font-size: 50px;
    margin-bottom: 15px;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    line-height: 75px;
    border: 1px dashed var(--brand-gold);
}


.fact-counter .column:nth-child(2) .inner .icon-box, .fact-counter .column:nth-child(4) .inner .icon-box {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}


.fact-counter .count-outer {
    position: relative;
    font-size: 40px;
    line-height: 1em;
    font-weight: 600;
    margin: 0px 0px;
    color: var(--text);
    margin-top: 15px;
}


.fact-counter .count-outer .plus-icon {
    position: relative;
    font-weight: 700;
    color: var(--text);
    font-size: 30px;
    margin-left: 8px;
    font-family: var(--font-body);
}


.fact-counter .count-outer .count-text {
    position: relative;
    font-weight: 700;
    color: var(--text);
    font-size: 30px;
}


.fact-counter .column .counter-title {
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 5px;
    display: inline-block;
}


/***

====================================================================
	Mission Section
====================================================================

***/

.mission-section {
    position: relative;
    padding: 100px 0px 60px;
    background-repeat: repeat-y;
    background-color: var(--brand-blue);
}


.mission-section .image-column {
    position: relative;
    margin-bottom: 40px;
}


.mission-section .image-column .image {
    position: relative;
}


.mission-section .image-column .image img {
    position: relative;
    width: 100%;
    display: block;
}


.mission-section .content-column {
    position: relative;
}


.mission-section .content-column .inner-column {
    position: relative;
    padding-left: 30px;
}


.mission-section .content-column .inner-column h2 {
    position: relative;
    color: var(--card);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 15px;
    font-family: "Lato", sans-serif;
}


.mission-section .content-column .inner-column .text {
    position: relative;
    color: var(--card);
    font-size: 14px;
    line-height: 1.9em;
    margin-bottom: 18px;
}


.mission-section .content-column .inner-column .signature {
    position: relative;
    margin-top: 48px;
}


.mission-section .content-column .inner-column .designation {
    position: relative;
    color: var(--card);
    font-weight: 700;
    margin-top: 8px;
    text-transform: uppercase;
    font-family: "Open Sans", sans-serif;
}





































/***

====================================================================
	subscribe-style-one
====================================================================

***/

.subscribe-style-one {
    position: relative;
    padding: 80px 0px 80px;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.subscribe-style-one:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.80);
}


.subscribe-style-one .env_message {
    position: relative;
}


.subscribe-style-one .icon-box {
    position: absolute;
    right: 15px;
    top: 0px;
    color: var(--card);
    font-size: 70px;
    line-height: 1em;
}


.subscribe-style-one h2 {
    position: relative;
    color: var(--card);
    font-size: 24px;
    font-weight: 700;
    padding-right: 92px;
    text-transform: capitalize;
    font-family: "Lato", sans-serif;
}


.subscribe-style-one .text {
    position: relative;
    font-size: 14px;
    color: var(--card);
    font-weight: 400;
    padding-right: 92px;
}


.subscribe-style-one form {
    position: relative;
    margin-top: 5px;
}


.subscribe-style-one .form-group {
    position: relative;
    display: block;
    z-index: 1;
    margin-bottom: 0px;
}


.subscribe-style-one .form-group input[type="text"], .subscribe-style-one .form-group input[type="tel"], .subscribe-style-one .form-group input[type="email"], .subscribe-style-one .form-group textarea {
    position: relative;
    width: 100%;
    line-height: 30px;
    padding: 10px 30px;
    height: 55px;
    display: inline-block;
    font-size: 14px;
    background: var(--card);
    border-radius: var(--radius-pill);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}


.subscribe-style-one .form-group input[type="email"]:focus {

}


.subscribe-style-one .form-group input[type="submit"], .subscribe-style-one .form-group button {
    position: absolute;
    top: 0px;
    left: -1px;
    float: left;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 1px;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.subscribe-style-one .donate-cta-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:0;
}

.subscribe-style-one .donate-cta-btn{
  width:auto;
  min-width:180px;
  border-radius:50px;
  text-align:center;
}

@media (max-width: 767px){
  .subscribe-style-one .donate-cta-wrap{
    justify-content:center;
    margin-top:20px;
  }
}



/*Social Icon Two*/

.social-icon-two {
    position: relative;
}


.social-icon-two li {
    position: relative;
    margin-right: 12px;
    display: inline-block;
}


.social-icon-two li a {
    position: relative;
    font-size: 18px;
    color: var(--muted);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}


.social-icon-two li a:hover {
    color: var(--brand-blue);
}


/***

====================================================================
	Styled Pagination
====================================================================

***/

.styled-pagination {
    position: relative;
}


.styled-pagination li {
    position: relative;
    display: inline-block;
    margin: 0px 6px 0px 0px;
}


.styled-pagination li a {
    position: relative;
    display: inline-block;
    line-height: 42px;
    height: 44px;
    font-size: 14px;
    min-width: 45px;
    color: var(--text);
    font-weight: 700;
    text-align: center;
    background: var(--card);
    border-radius: 5px;
    border: 1px solid var(--border);
    text-transform: uppercase;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
}


.styled-pagination li a:hover, .styled-pagination li a.active {
    color: var(--card);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}


.styled-pagination li.next a {
    min-width: 90px;
}


/***

====================================================================
	Sidebar Page Container
====================================================================

***/

html[dir="rtl"] .sidebar-page-container {
    position: relative;
    padding: 80px 0px 80px;
    direction: rtl;
}


.sidebar-page-container .content-side, .sidebar-page-container .sidebar-side {
    margin-bottom: 40px;
}


html[dir="rtl"] .blog-single.padding-right {
    padding-right: 30px;
}


html[dir="rtl"] .sidebar-widget {
    margin-bottom: 45px;
}


/*Sidebar Title*/

.sidebar-title {
    position: relative;
    margin-bottom: 20px;
}


.sidebar-title h2 {
    font-size: 18px;
    color: var(--text);
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
}


/*Blog Category*/

.cat-list {
    position: relative;
}


.cat-list li {
    position: relative;
}


.cat-list li a {
    position: relative;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 6px;
    display: block;
    padding-right: 25px;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}


.cat-list li:last-child a {
    border-bottom: 0px;
}


.cat-list li a:before {
    position: absolute;
    content: "";
    right: 0px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--brand-blue);
}


.cat-list li a:after {
    position: absolute;
    content: "";
    left: 0;
    top: 11px;
    right: 3px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--brand-blue);
}


.cat-list li a:hover {
    color: var(--brand-blue);
}




/* sidebar */

.sidebar a {
    color: var(--muted);
}


.sidebar a:hover {
    color: var(--brand-blue);
}


/*  Register and login Pages   ||-----------*/

.page-signin .main-body {
    max-width: 480px;
    margin: 10px auto;
}


.page-signin .body-inner {
    position: relative;
    padding: 0 20px 20px;
}


.card {
    position: relative;
    overflow: hidden;
    margin: 10px 0 0px 0;
    border: none;
    border-radius: 0px;
}


.mdl-shadow--2dp, .card-panel {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}


.bg-white {
    background-color: var(--card);
    color: var(--text);
}


.z-depth-2, .page-signin .card {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.card .card-content {
    padding: 20px;
    border-radius: 0 0 2px 2px;
}


.page-signin .card .card-content {
    padding: 30px 20px;
}


.page-signin .logo {
    font-size: 26px;
    font-weight: normal;
}


.page-signin .form-group {
    position: relative;
    margin: 0;
}


.page-signin .form-group.checkbox-field {
    padding-right: 30px;
}


.ui-input-group {
    position: relative;
    margin: 18px 0 12px;
}


.card .card-action {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 20px;
}


.card .card-action.no-border {
    border: 0;
}


.color-primary, a.color-primary {
    color: var(--brand-blue);
}


.card .card-action>a {
    margin-right: 20px;
    text-transform: uppercase;
}




.page-signin .additional-info a {
    color: var(--card);
}


.page-signin .additional-info .divider-h {
    border-right: 1px solid var(--card);
    margin: 0 15px;
}


.page-signin .additional-info {
    text-align: center;
    font-size: 12px;
}


.page-signin .body-inner:before {
    z-index: -1;
    content: " ";
    line-height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--brand-blue);
    height: 80%;
}


html[dir="rtl"] .ui-input-group>input {
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 0 0 var(--card);
    border: none;
    border-bottom: 1px solid var(--border);
    margin: 0;
}


html[dir="rtl"] .ui-input-group>input:focus {
    border-bottom: 1px solid var(--border);
    box-shadow: 0 0 0 var(--card);
}


/*
    :-moz-placeholder {  Mozilla Firefox 4 to 18
        direction: rtl;
    }
    ::-moz-placeholder
        direction: rtl;
    }
    :-ms-input-placeholder
        direction: rtl;
    }
*/

html[dir="rtl"] .page-signin .ui-input-group .form-control {
    color: var(--muted);
    text-align: right;
}


/* WebKit browsers */

.page-signin .ui-input-group input.form-control::placeholder {
    direction: rtl;
}


.ui-input-group .input-bar {
    position: relative;
    display: block;
    width: 100%;
}


.ui-input-group .input-bar:before {
    left: 50%;
}




.ui-input-group .input-bar:after {
    right: 50%;
}


.ui-input-group .input-bar:before, .ui-input-group .input-bar:after {
    content: "";
    height: 1px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: var(--brand-blue);
    -webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


.ui-input-group>label {
    color: var(--muted);
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 10px;
    -webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
}


.ui-input-group>input:focus~label, .ui-input-group>input:valid~label {
    top: -20px;
    left: 0;
    font-size: 12px;
}


.ui-input-group>input:focus~label, .ui-input-group>textarea:focus~label {
    color: var(--brand-blue);
}




.ui-input-group>input:focus~.input-bar:before, .ui-input-group>input:focus~.input-bar:after {
    width: 50%;
}


.checkbox-field label {
    font-size: 12px;
}


.checkbox-field #check_box {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}


.custom-check {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid var(--brand-blue);
    top: 4px;
    position: absolute;
    right: 0;
}


.custom-check:before {
    content: "";
    font-family: "Flaticon";
    color: var(--brand-blue);
    font-size: 12px;
    position: absolute;
    top: -4px;
    left: 4px;
}


.checkbox-field #check_box:checked+.custom-check:before {
    content: "";
}


.spacer {
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}


/*----------------------------------------*/

/* 18. Error page css
/*----------------------------------------*/

.error-easy-text {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
}


.high-text {
    font-size: 200px;
    line-height: 200px;
    color: var(--brand-blue);
    font-weight: 900;
}


.error-bot {
    font-size: 24px;
}


.error-btn {
    text-transform: capitalize;
    margin-top: 30px;
    display: inline-block;
    border: 2px solid var(--brand-gold);
}


.error-btn:hover {
    background: var(--card);
    color: var(--brand-gold);
}


/* list group */

.list-group li {
    color: var(--brand-gold);
    font-size: 1.07143em;
    font-weight: 500;
    margin-bottom: 20px;
}


.list-group li span {
    color: var(--text);
}


.list-group li:last-child {
    margin-bottom: 0;
}


.tab-content>.active {
    display: block;
    overflow: hidden;
}


.mb-60 {
    margin-bottom: 60px;
}


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


/* ---------- MASONRY FILTER  ---------- */
.filter-wrap {
    margin: 50px 0;
}

.masonry-filter {
    margin-bottom: 50px;
    gap: 6px;
}


.masonry-filter>li {
    padding-right: 0;
    display: inline-block;
}




.masonry-filter a.active, .masonry-filter a:active, .masonry-filter a:hover, .masonry-filter a:focus {
    background-color: var(--brand-blue);
    color: var(--card);
}


.masonry-filter a {
    border: 1px solid var(--st_blue);
    border-radius: var(--radius-pill);
    color: var(--muted);
    display: inline-block;
    float: none;
    line-height: 40px;
    margin-bottom: 10px;
    outline: medium none;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-size: 14px;
    padding: 0 32px;
}

/* إجبار التوسط لنظام Flexbox */
ul.masonry-filter.news-type-filter {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    list-style: none;
}


/* إزالة أي إزاحة موروثة من العناصر الداخلية */
.masonry-filter li {
    float: none !important;
    display: inline-block !important;
}

@media (max-width: 575.98px){
    .filter-wrap{
        padding-right: 8px;
        padding-left: 8px;
    }

    ul.masonry-filter.news-type-filter{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }

    .masonry-filter > li{
        display: block !important;
        width: 100%;
    }

    .masonry-filter a{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-size: 12px;
        margin-bottom: 0;
        text-align: center;
        white-space: nowrap;
        border-radius: 30px;
    }
}

@media (max-width: 380px){
    ul.masonry-filter.news-type-filter{
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .masonry-filter a{
        min-height: 38px;
        line-height: 38px;
        font-size: 12px;
    }
}
/*
================================
04:-     index-4
================================
*/

.page-4 h1, .page-4 h2, .page-4 h3, .page-4 h4 {

}


.page-4 h6, .page-4 p {

}


.menu-4 .nav-outer {
    padding: 0;
}


.header-4 {
    padding: 0 25px;
}


.header_btn {
    padding: 25px 0;
}


.main-slider-4 h1.pawprint {
    margin-right: 50px;
}


.main-slider-4 h1 i {
    color: var(--brand-blue);
}


.header_btn a.btn-style-one {
    border-radius: var(--radius-sm);
    color: var(--card);
    padding: 4px 40px 4px 40px;
    font-size: 16px;
    border: 2px solid var(--brand-blue);
    background-color: var(--brand-blue);
}


.header_btn a.btn-style-one:hover {
    background-color: var(--card);
    border-radius: var(--radius-sm);
    color: var(--brand-blue);
}


.header_btn a.btn-style-one i {
    margin-left: 15px;
}


.header_btn a.btn-style-two {
    position: relative;
    color: var(--card);
    font-size: 16px;
    line-height: 29px;
    padding: 4px 40px 4px 40px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    background-color: var(--brand-gold);
    border: 2px solid var(--brand-gold);
}


.header_btn a.btn-style-two:hover {
    color: var(--brand-gold);
    background-color: var(--card);
}


.header_btn a.btn-style-two:hover i {
    color: var(--brand-gold);
}


.header_btn a.btn-style-two i {
    margin-right: 15px;
}


.header_btn a img {
    width: 15px;
    height: 15px;
    margin-left: 10px;
}


.syringe-icon {
    background-image: url("../images/syringe.svg");
    width: 35px;
    height: 35px;
    margin-left: 50px;
}


.main-slider h2 {
    position: relative;
    color: var(--text);
    font-size: 52px;
    font-weight: 400;
    line-height: 1.2em;
    display: inline-block;
    font-family: "lato", sans-serif;
    text-align: right;
}


.btns-box-4 a.service {
    text-align: inherit;
    line-height: 29px;
    border-width: 2px;
    margin: 0px 0px 0px 10px;
    padding: 8px 20px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 16px;
    transition: .5s;
    border-radius: 5px;
    text-transform: uppercase;
}


.btns-box-4 a.advice {
    text-align: inherit;
    line-height: 29px;
    border-width: 2px;
    margin: 0px 10px 0px 0px;
    padding: 8px 20px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 5px;
    text-transform: uppercase;
    background-color: var(--text);
    border: 1px solid var(--text);
}



.pet a {
    text-decoration: none !important;
    cursor: pointer;
}


.pet ::after, .pet ::before {
    box-sizing: border-box;
}


.pet.main-wrapper {
    background: var(--pt_white) none repeat scroll 0 0;
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}


.pet ul li {
    list-style: none;
}


/* Preolader */

.pet #preloading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url("../images/icons/preloader-dog.gif") var(--pt_white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 200px;
}


.pet .wow {
    animation-duration: 1300ms;
    animation-delay: 0.6s;
}


.pet p, .pet div, .pet a {

}


.pet h1, .pet h2, .pet h3, .pet h4, .pet h5, .pet h6, .pet p.head {
    font-family: var(--pt_font_2);
    color: var(--pt_black);
    font-weight: bold;
}


.pet i {
    font-family: "FontAwesome";
    font-style: normal;
}


.pet h1 {
    font-size: 86px;
    margin-bottom: 1.5rem;
}


.pet h1 span, .pet h2 span, .pet h3 span {
    font-family: var(--pt_font_2) !important;
    font-style: italic;
    display: inline-block;
}


.pet h2 {
    font-size: 64px;
}


.pet h3 {
    font-size: 48px;
}


.pet h4 {
    font-size: 36px;
}


.pet h5 {
    font-size: 30px;
}


.pet p.head {
    font-size: 24px;
}


p, a {
    font-size: 16px;
    color: var(--pt_black);
}


ul, p {
    margin-bottom: 1em;
}


.pet a.btn.main {
    font-size: 20px;
    padding: 15px 50px;
    font-weight: bold;
    text-transform: capitalize;
    box-shadow: 0px 5px 5px var(--pt_grey);
    color: var(--pt_white);
    background: var(--pt_white);
    border: 2px solid var(--pt_orange);
    border-radius: var(--radius-pill);
    border-top-left-radius: 0px;
    transition: 0.3s;
    overflow: hidden;
    display: inline-block;
}


.pet a.btn.main:hover {
    color: var(--pt_orange);
    border-top-left-radius: 50px;
    border-bottom-left-radius: 0px;
    transition: 0.5s;
}


.pet .yellow {
    color: var(--pt_yellow);
}


.pet .bg_yellow {
    background: var(--pt_yellow);
}


.pet .orange {
    color: var(--pt_orange);
}


.pet .bg_orange {
    background: var(--pt_orange);
}


.pet .blue {
    color: var(--brand-blue);
}


.pet .bg_blue {
    background: var(--brand-blue);
}


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


.pet .text_ltr {
    text-align: center;
    margin-bottom: 50px;
}


.pet .heading p {
    position: relative;
    margin-bottom: 0px;
    padding: 0px 45px;
    display: inline-block;
    font-size: 15px;
}


.pet .heading p .blue {
    color: var(--st_blue);
    font-size: 20px;
}


.pet .heading p .white {
    color: var(--pt_white);
    font-size: 16px;
    padding: 0px 5px;
}


.pet .heading p .yellow {
    color: var(--pt_yellow);
    font-size: 16px;
    padding: 0px 5px;
}


.pet .heading p::before {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    top: 56%;
    left: 0%;
    background: var(--pt_nwhite);
}


.pet .heading p::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    top: 56%;
    right: 0%;
    background: var(--pt_nwhite);
}


.pet h1 span, .pet h2 span, .pet h3 span, .pet h4 span, .pet h5 span {
    transition: all 1s cubic-bezier(0.54, 0.085, 0.5, 0.92) 0s;
    color: var(--pt_grey);
    font-style: oblique;
    will-change: transform;
}


.pet .card {
    overflow: visible;
}


/* Range Slider */

.pet .contact .form .slidecontainer {
    width: 100%;
    padding: 20px 0px;
}


.pet .contact .form .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: var(--pt_orange);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: var(--radius-lg);
}


.pet .contact .form .slider:hover {
    opacity: 1;
}


.pet .contact .form .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: var(--brand-blue);
    cursor: pointer;
    border-radius: 50%;
}


.pet .contact .form .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: var(--brand-blue);
    cursor: pointer;
    border-radius: 50%;
}


.pet .contact .form .slidecontainer #day {
    color: var(--pt_orange);
    font-weight: bold;
    font-size: 20px;
}


.pet .contact .form .result h3 {
    color: var(--pt_black);
}


.pet .contact .form .result h3 span {
    color: var(--pt_black);
} */


/* Home Page 5 End*/

/***

====================================================================
	Featured Section
====================================================================

***/

.info-section {
    position: relative;
    padding: 55px 0px;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
}


.info-section:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.80);
}


.info-section .auto-container {
    max-width: 1520px;
    margin: 0 auto;
}


.infosection a {
    color: var(--card);
}


.info-lists {
    position: relative;
    float: right;
}


.info-lists li {
    position: relative;
    color: var(--card);
    font-weight: 300;
    font-size: 22px;
    margin-left: 10px;
    display: inline-block;
    font-family: "Lato", sans-serif;
}


.info-lists li .icon {
    position: relative;
    width: 55px;
    height: 55px;
    color: var(--card);
    line-height: 55px;
    text-align: center;
    margin-left: 15px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid var(--card);
}


.info-lists li strong, .info-lists li strong a {
    font-weight: 700;
    font-size: 18px;
    color: var(--card);
}



.info-widget .margin_btm {
    margin-bottom: 20px;
    padding: 0;
}


.info-widget .table-cell {
    display: table-cell;
    vertical-align: middle;
}


.info-widget .table-cell p {
    padding-left: 20px;
    line-height: 1.5;
    color: var(--muted);
}


.info-widget .table-cell p.date {
    margin-top: 15px;
}


.info-widget ul li a {
    font-size: 14px;
    color: var(--text);
}

/* About Page End*/





/* star style*/

/***

====================================================================
	index Style
====================================================================

***/


/* hero */

    .hero-plain {
    position: relative;
}

    .hero-plain__media {
    position: relative;
    min-height: 64vh;
    max-height: 78vh;
    overflow: hidden;
}


    /* الخلفية (صورة/فيديو) */


    /* إيقاف الحركة للمستخدمين الحساسين */
    @media (prefers-reduced-motion: reduce){
    .hero-plain__video{animation:none}
    }

    /* التدرّج فوق الخلفية وتحت النص */


    /* المحتوى في الوسط */
    .hero-plain__content {
    position: relative;
    z-index: 2;
    min-height: 64vh;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--card);
    max-width: 980px;
    margin: 0 auto;
}





    .hero__cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}


    /* Stack CTA buttons vertically on small screens */
    @media (max-width: 768px){
    .hero__cta{
        width: 100%;
        flex-direction: column;      /* تحت بعض */
        align-items: stretch;        /* تاخد عرض الحاوية */
        gap: 8px;
    }
    .hero__cta a{
        flex: none;                  /* يلغي flex:1 القديمة */
        width: 100%;
        display: block;
        text-align: center;
        padding: 12px 16px;          /* هدف لمس مريح */
        border-radius: 14px;
    }

    /* تحسين القراءة على الموبايل (اختياري) */
    .hero-plain__content h1{ font-size:24px; }
    .hero-plain__content p{ font-size:14px; margin-bottom:12px; }
    }
    /* غمّق الصورة قليلًا */
    .hero-plain__img,
    .hero-plain__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
    z-index: 0;
    filter: brightness(.58) contrast(1.05) saturate(.95);
}


    /* تدرّج أقوى + مركز إضاءة حول النص */
    .hero-plain__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(closest-side at 60% 60%,
        rgba(2,6,23,.55) 0%,
        rgba(2,6,23,.35) 45%,
        rgba(2,6,23,.12) 70%,
        rgba(2,6,23,0) 100%),
        linear-gradient(180deg,
        rgba(2,6,23,.60) 0%,
        rgba(2,6,23,.45) 55%,
        rgba(2,6,23,.20) 100%);
}


    /* ظلّ أوضح للنص */
    .hero-plain__content h1 {
    font-size: 42px;
    line-height: 1.15;
    margin: 0 0 8px;
    text-shadow: 0 6px 22px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.5);
}

    .hero-plain__content p {
    max-width: 54ch;
    margin: 0 0 16px;
    opacity: .95;
    color: rgba(255,255,255,.95);
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
}


    /* على الموبايل: تغميق أكثر لثبات القراءة */
    @media (max-width: 992px){
    .hero-plain__img,.hero-plain__video{ filter:brightness(.5) }
    .hero-plain__overlay{ background: rgba(2,6,23,.46) }
    }






/**
=============================================
pages style
=============================================
*/


/* Smooth scrolling for internal links */
html {
    scroll-behavior: smooth;
}

/*  Hero Section  */

/* Inner Hero - Medium height, right-aligned content, soft overlay */
.inner-hero {
    position: relative;
    z-index: 1;
    min-height: 360px;
    padding: 100px 0;
    background-image: var(--hero-bg, url("{{ asset('frontend/images/hero/default-hero.jpg') }}"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
}


/* Soft overlay for readability */
.inner-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
}


/* Content container - right-aligned */
.inner-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: right;
    color: var(--card);
}


/* Content wrapper - limits width and aligns right */
.inner-hero__content-wrapper {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stories-hero {
    margin-bottom: 0;
}





/* Eyebrow text */
.inner-hero__eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}


/* Main title */
.inner-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--card);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out;
}


/* Description */
.inner-hero__description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 32px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 1s ease-out;
}


/* CTA button container */
.inner-hero__cta {
    margin-top: 8px;
}


/* CTA animation + hover */
.inner-hero__cta .theme-btn {
    min-width: 170px;
    border-radius: var(--radius-pill);
    transition: all 0.3s ease;
    animation: fadeInUp 1.2s ease-out;
}


.inner-hero__cta .theme-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
  .inner-hero {
    min-height: 320px;
    padding: 80px 0;
  }

  .inner-hero__title {
    font-size: 2rem;
  }

  .inner-hero__description {
    font-size: 1.0625rem;
  }
}

@media (max-width: 767.98px) {
  .inner-hero {
    min-height: 280px;
    padding: 60px 0;
  }

  .inner-hero__title {
    font-size: 1.75rem;
    margin-bottom: 16px;
  }

  .inner-hero__description {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 24px;
  }
}

@media (max-width: 575.98px) {
  .inner-hero {
    min-height: 260px;
    padding: 50px 0;
  }

  .inner-hero__title {
    font-size: 1.5rem;
    margin-bottom: 14px;
  }

  .inner-hero__description {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
}

/* Fade-in-up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*  end Section Title */





/*  Section Title */

    .sec-title-two ,.sec-title-two-counter {
    position: relative;
    margin-bottom: 40px;
}


    .sec-title-two .title-icon {
    position: relative;
    margin-bottom: 15px;
}


    .sec-title-two h2 {
    position: relative;
    color: var(--text);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4em;
}
   .sec-title-two-counter {
    color: #fff;
    text-align: center;

}

    .sec-title-two .text {
    position: relative;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.4em;
    margin-top: 8px;
}


    .sec-title-two.centered {
    text-align: center;
}


    .sec-title-two.light h2, .sec-title-two.light .text {
    color: var(--card);
}


/* end  Section Title */













/*  Final CTA Section */
    .final-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    text-align: center;
}


    .final-cta .final-cta-content {
    margin: 0 auto;
}


    .final-cta .cta-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    animation: pulse-soft 2s ease-in-out infinite;
}


    @keyframes pulse-soft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
    }

    .final-cta .cta-icon i {
    font-size: 32px;
    color: var(--card);
}


    .final-cta h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--card);
    margin-bottom: 16px;
    line-height: 1.4;
}


    .final-cta p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    line-height: 1.6;
}


    .final-cta .cta-main-btn {
    padding: 16px 40px;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--brand-blue);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

    .cta-button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}


    /* زر التبرع الثانوي (مفرغ أو بلون مختلف) */
    .cta-secondary-btn {
    background: transparent !important;
    border: 2px solid var(--card) !important;
    color: var(--card) !important;
}


    .cta-secondary-btn:hover {
    background: var(--card) !important;
    color: var(--brand-blue) !important;
}


    .contact-form-wrapper {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border: none !important;
    margin-top: -50px;
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
}


    .final-cta .cta-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: var(--card);
    color: var(--brand-blue-dark);
}


    .final-cta .cta-main-btn i {
    font-size: 1.25rem;
}


    @media (max-width: 767px) {
    .final-cta {
        padding: 60px 20px;
    }
    .final-cta h2 {
        font-size: 1.5rem;
    }
    .final-cta p {
        font-size: 1rem;
    }
    .final-cta .cta-main-btn {
        padding: 14px 28px;
        font-size: 1rem;
    }
    }
/*  end Final CTA Section */


/* اخفااء التبرع السريع بالشاشات الصغيرة */
/* @media (max-width: 767px) {
    .quick-donate-widget {
        display: none !important;
    }
} */




/***

====================================================================
	Main Footer
====================================================================

***/

/* star footer section */

    .main-footer {
        position: relative;
    }


    html[dir="rtl"] .main-footer .widgets-section {
        position: relative;
        padding: 76px 0px 60px;
    }


    .main-footer .footer-widget {
        position: relative;
        margin-bottom: 30px;
    }


    .main-footer .footer-widget h2 {
        position: relative;
        font-size: 18px;
        color: var(--text);
        font-weight: 700;
        line-height: 1.2em;
        margin-top: 10px;
        margin-bottom: 25px;
    }


    /*Logo Widget*/

    html[dir="rtl"] .main-footer .logo-widget {
        position: relative;
    }


    html[dir="rtl"] .main-footer .logo-widget .logo {
        position: relative;
        margin-bottom: 20px;
    }


    html[dir="rtl"] .main-footer .logo-widget .text {
        position: relative;
        font-size: 14px;
        font-weight: 400;
        color: var(--muted);
        margin-bottom: 25px;
    }


    html[dir="rtl"] .links-widget .links {
        position: relative;
    }


    html[dir="rtl"] .links-widget .links li {
        position: relative;
        margin-bottom: 8px;
    }


    html[dir="rtl"] .links-widget .links li a {
        position: relative;
        padding-right: 32px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 400;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }


    html[dir="rtl"] .links-widget .links li a:before {
        position: absolute;
        content: "";
        right: 0px;
        top: 4px;
        color: var(--muted);
        line-height: 1em;
        font-family: "Flaticon";
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
    }


    .links-widget .links li a {
        color: var(--border);
    }


    html[dir="rtl"] .links-widget .links li a:hover::before {
        color: var(--brand-blue);
    }


    html[dir="rtl"] .info-widget {
        position: relative;
    }


    html[dir="rtl"] .info-widget ul {
        position: relative;
    }


    html[dir="rtl"] .info-widget ul li {
        position: relative;
        color: var(--text);
        font-size: 14px;
        margin-bottom: 12px;
        padding-right: 35px;
    }


    html[dir="rtl"] .info-widget ul li .icon {
        position: absolute;
        right: 0px;
        top: 4px;
        color: var(--muted);
        font-size: 24px;
        line-height: 1em;
    }


    html[dir="rtl"] .info-widget ul li:last-child .icon {
        font-size: 18px;
    }


    html[dir="rtl"] .subscribe-widget .text {
        position: relative;
        font-size: 14px;
        font-weight: 400;
        color: var(--muted);
        line-height: 2em;
        margin-bottom: 15px;
    }


    html[dir="rtl"] .newsletter-form {
        position: relative;
    }



    .main-footer .subscribe-widget .form-group {
        position: relative;
        display: block;
        margin-bottom: 10px;
    }


    .main-footer .subscribe-widget .form-group input[type="text"], .main-footer .subscribe-widget .form-group input[type="email"] {
        position: relative;
        display: block;
        width: 100%;
        line-height: 28px;
        padding: 10px 20px;
        height: 48px;
        font-size: 15px;
        color: var(--muted);
        border-radius: var(--radius-pill);
        border: 1px solid var(--border);
        -webkit-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        transition: all 300ms ease;
    }


    .main-footer .subscribe-widget .form-group button {
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        padding: 6px 39px;
        text-transform: uppercase;
    }


    .main-footer .subscribe-widget .form-group input[type="text"]:focus, .main-footer .subscribe-widget .form-group input[type="email"]:focus {
        border-color: var(--brand-gold);
    }


    .main-footer .footer-bottom {
        position: relative;
        text-align: center;
        padding: 45px 0px 45px;
        border-top: 1px solid var(--border);
    }


    .main-footer .footer-bottom .copyright {
        position: relative;
        color: var(--muted);
        font-size: 14px;
        text-align: center;
    }


    .main-footer .footer-bottom .copyright span {
        font-weight: 700;
    }


    html[dir="rtl"] .main-footer.style-two .logo-widget .text {
        color: var(--card);
    }


    .main-footer.style-two {
        background-color: var(--text);
        border-top: 4px solid var(--brand-blue);
    }


    .main-footer.style-two .logo-widget .text, .main-footer.style-two .footer-widget h2 {
        color: var(--card);
    }


    .main-footer.style-two .widget-post .text a, .main-footer.style-two .widget-post .post-info, .main-footer.style-two .links-widget .links li a, .main-footer.style-two .info-widget ul li {
        color: var(--border);
    }


    .main-footer.style-two .footer-bottom {
        border-color: var(--text);
    }


    .main-footer.style-two .info-widget ul li a {
        color: var(--border);
    }
/*  end footer Section */












/* Share Post Section */

.pet.b_profile .job .profile .elements span.share a {
    margin-right: 10px;
    line-height: 35px;
    background: none;
    font-size: 20px;
    padding: 0px 5px;
    border-radius: 50%;
    color: var(--pt_white);
    height: 40px;
    width: 40px;
    text-align: center;
    border: 2px solid var(--pt_white);
    font-weight: bold;
    transition: 0.5s;
    position: relative;
    margin-bottom: 0px;
}


.pet.b_profile .job .profile .elements span.share a i {
    padding-left: 0px;
    color: var(--pt_white);
}


.pet.b_profile .job .profile .elements span.share a:hover {
    border-radius: 0px;
    transition: 0.5s;
}


.pet.b_profile .job .profile .elements span.share a[title="twitter"] {
    font-size: 17px;
}


.pet.b_profile .job .profile .elements span.share a[title="facebook"]:hover {
    border: 2px solid var(--pt_orange);
}


.pet.b_profile .job .profile .elements span.share a[title="twitter"]:hover {
    border: 2px solid var(--pt_yellow);
}


.pet.b_profile .job .profile .elements span.share a[title="instagram"]:hover {
    border: 2px solid var(--pt_orange);
}


.pet.b_profile .job .profile .elements span.share a[title="facebook"]:hover i {
    color: var(--pt_orange);
}


.pet.b_profile .job .profile .elements span.share a[title="twitter"]:hover i {
    color: var(--pt_yellow);
}


.pet.b_profile .job .profile .elements span.share a[title="instagram"]:hover i {
    color: var(--pt_orange);
}

/* Pet Profile Page End */





/* --- 1. التنسيقات العامة (Desktop) --- */
.main-header2 {
    background: #ffffff;
    width: 100%;
    direction: rtl;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
}

.top-bar2 {
    height: 5px;
    background-color: #0082c3;
}

.inner-header2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1250px;
    margin: 0 auto;
    padding: 10px 15px;
}

/* اللوغو */
.logo-box2 { flex-shrink: 0; }
.img-logo2 { max-width: 170px; height: auto; display: block; }

/* القائمة الرئيسية - سنتر */
.nav-menu2 { flex-grow: 1; display: flex; justify-content: center; }
.nav-list2 { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-list2 li { margin: 0 12px; }

.nav-list2 li a {
    text-decoration: none;
    color: var(--text);
    /* font-weight: 700;
    font-size: 15px;
    white-space: nowrap;6
    transition: all 0.3s ease; */
    padding: 20px 0px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 700;
    min-height: 0px;
    background: none;
    border: 0px;
}

/* حالة الحوم والنشط - أزرق */
.nav-list2 li a:hover,
.nav-list2 li a.active2 {
    color: #0082c3 !important;
}

/* زر التبرع - يسار (ديسكتاب فقط) */
.btn-donate2 {
    background-color: #e6a333;
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
    transition: 0.3s;
}

.btn-donate2:hover { background-color: #cf8d20; }

/* زر الموبايل */
.menu-toggle2 {
    display: none;
    font-size: 26px;
    color: #0082c3;
    background: none;
    border: none;
    cursor: pointer;
}

/* --- 2. تنسيقات الموبايل (Responsive) --- */
@media (max-width: 991px) {
    /* إخفاء زر التبرع في الموبايل */
    .left-box2 { display: none !important; }
.nav-menu2 { justify-content: end; }

    .inner-header2 {
        padding: 10px 15px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .img-logo2 { max-width: 130px !important; }
    .menu-toggle2 { display: block !important; }

    /* القائمة المنسدلة */
    .nav-list2 {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-top: 2px solid #0082c3;

        /* ضبط الحركة */
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-15px);
        transition: all 0.4s ease-in-out;
    }

    /* ظهور القائمة */
    .nav-list2.show2 {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-list2 li {
        width: 100%;
        margin: 0 !important;
        border-bottom: 1px solid #f1f1f1;
    }

    .nav-list2 li a {
        display: block;
        padding: 15px 25px !important;
        font-size: 16px;
        text-align: right;
    }

    /* التحديد أزرق مع خلفية خفيفة */
    .nav-list2 li a:hover,
    .nav-list2 li a.active2 {
        background-color: #f5faff;
        color: #0082c3 !important;
        padding-right: 40px !important; /* حركة الانزلاق */
    }
}