/*=============================================================
  KHAIRAH – Two-Color Brand Theme Override
  Primary  : #0079E8  (Bright Professional Blue)
  Secondary: #039004  (Deep Fresh Green)
  Background: #ffffff / #f4f8ff (very light neutral)
  Generated: 2026-02-22
=============================================================*/

/* ─────────────────────────────────────────────────────────
   0. CSS Custom Properties (Design Tokens)
───────────────────────────────────────────────────────── */
:root {
  --primary:        #0079E8;
  --primary-dark:   #005BB5;
  --primary-light:  #3D9CFF;
  --secondary:      #039004;
  --secondary-dark: #026A03;
  --secondary-light:#05C206;

  /* Gradients - Blue to Green */
  --grad-main:      linear-gradient(135deg, #0079E8 0%, #039004 100%);
  --grad-hover:     linear-gradient(135deg, #039004 0%, #0079E8 100%);
  --grad-btn:       linear-gradient(90deg, #0079E8 0%, #039004 100%);
  --grad-btn-hover: linear-gradient(90deg, #039004 0%, #0079E8 100%);
  --grad-hero:      linear-gradient(135deg, rgba(0,121,232,0.92) 0%, rgba(3,144,4,0.82) 100%);

  /* Backgrounds */
  --bg-white:     #ffffff;
  --bg-light:     #f4f8ff;
  --bg-section:   #f0f7ff;
  --bg-dark:      #0079E8;

  /* Text */
  --text-dark:    #0D1B2A;
  --text-body:    #4A5568;
  --text-muted:   #718096;

  /* UI */
  --border-color: #e2eaf5;
  --shadow-blue:  0 8px 30px rgba(0,121,232,0.15);
  --shadow-green: 0 8px 30px rgba(3,144,4,0.10);
  --radius-btn:   40px;
  --radius-card:  16px;
  --transition:   all 0.3s ease;
}

/* ─────────────────────────────────────────────────────────
   1. Google Font — Inter (modern, premium San-Serif)
───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────────
   2. Base Typography & Body
───────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', 'Barlow Condensed', sans-serif;
  background-color: var(--bg-white);
  color: var(--text-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
  font-family: 'Inter', 'Barlow Condensed', sans-serif;
  font-weight: 700;
}

p { color: var(--text-body); }

a { color: var(--primary); transition: var(--transition); }
a:hover { color: var(--secondary); }

/* ─────────────────────────────────────────────────────────
   3. Preloader
───────────────────────────────────────────────────────── */
.preloader .sk-cube-grid .sk-cube {
  background-color: var(--primary);
}

/* ─────────────────────────────────────────────────────────
   4. Topbar
───────────────────────────────────────────────────────── */
.topbar {
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.contact-info li i {
  color: var(--secondary-light) !important;
}

.topbar .social ul li a:hover {
  color: var(--primary-light);
  background: transparent;
}

/* Language Toggle */
.toggle-slider {
  background: var(--primary);
}

/* ─────────────────────────────────────────────────────────
   5. Navigation / Header
───────────────────────────────────────────────────────── */
.tp-site-header.fixed-top,
.tp-site-header.sticky-on {
  background: var(--bg-dark) !important;
  box-shadow: 0 2px 20px rgba(0,121,232,0.15);
}

.tp-site-header #navbar > ul > li .sub-menu a:hover {
  color: var(--primary) !important;
}

.tp-site-header #navbar > ul li a.active,
.tp-site-header #navbar > ul li.active > a {
  color: var(--primary-light) !important;
}

.tp-site-header #navbar ul a:hover,
.tp-site-header #navbar ul li.current a {
  color: var(--primary) !important;
}

.tp-site-header .navbar-header button {
  background: var(--grad-btn) !important;
}

.tp-site-header #navbar .close-navbar {
  background: var(--grad-btn) !important;
}

/* Volunteer / CTA button in nav */
.theme-btn-s2 {
  background: white !important;
  background-size: 200%, 1px !important;
  color: black !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-blue);
  transition: var(--transition) !important;
}
.theme-btn-s2:hover,
.theme-btn-s2:focus,
.theme-btn-s2:active {
  background: var(--grad-btn-hover) !important;
  background-position: 100% !important;
  color: #fff !important;
  box-shadow: var(--shadow-green);
}

/* ─────────────────────────────────────────────────────────
   6. Theme Buttons
───────────────────────────────────────────────────────── */
.theme-btn {
  display: inline-block !important;
  vertical-align: middle !important;
  background:white !important;
  background-size: 200%, 1px !important;
  color: black !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
}
.theme-btn:hover,
.theme-btn:focus,
.theme-btn:active {
  background: var(--grad-btn-hover) !important;
  background-position: 100% !important;
  color: #fff !important;
  box-shadow: var(--shadow-green);
}

.theme-btn-s3 {
    background-color: white;
    border-radius: 31px !important;
    color: black !important;
}
.theme-btn-s3:hover,
.theme-btn-s3:focus,
.theme-btn-s3:active {
  background-color: var(--secondary) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   7. Back-to-Top Button
───────────────────────────────────────────────────────── */
.back-to-top {
  background:black !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-blue);
}
.back-to-top:hover {
  background: var(--grad-btn-hover) !important;
  box-shadow: var(--shadow-green);
}

/* ─────────────────────────────────────────────────────────
   8. Page Title Banner
───────────────────────────────────────────────────────── */
.page-title:before {
  background: linear-gradient(135deg, rgba(0,26,61,0.88) 0%, rgba(0,121,232,0.65) 100%);
}

.page-title .breadcrumb li a:hover {
  color: var(--secondary-light);
}

/* ─────────────────────────────────────────────────────────
   9. Section Headings & Accent Lines
───────────────────────────────────────────────────────── */
.section-title span,
.section-title .title-tag {
  color:black;
}

/* ─────────────────────────────────────────────────────────
   10. Service Sidebar
───────────────────────────────────────────────────────── */
.service-sidebar .service-list-widget h3:before,
.service-sidebar .service-list-widget h3:after {
  background-color: var(--primary) !important;
}
.service-sidebar .service-list-widget a:hover,
.service-sidebar .service-list-widget .current a {
  color: var(--primary) !important;
}
.service-sidebar .contact-widget {
  background: var(--grad-main) !important;
}

/* ─────────────────────────────────────────────────────────
   11. Blog Sidebar
───────────────────────────────────────────────────────── */
.tp-blog-sidebar .search-widget form button {
  background: var(--grad-btn) !important;
}
.tp-blog-sidebar .search-widget input:focus {
  background-color: rgba(0,121,232,0.06) !important;
  border-color: var(--primary) !important;
}
.tp-blog-sidebar .category-widget ul a:hover {
  color: var(--primary) !important;
}
.tp-blog-sidebar .category-widget ul li:hover:before {
  background: var(--primary) !important;
}
.tp-blog-sidebar .tag-widget ul li a:hover {
  background: var(--grad-btn) !important;
  color: #fff !important;
}
.tp-blog-sidebar .recent-post-widget .post h4 a:hover {
  color: var(--primary) !important;
}

/* Category sidebar */
.category-sidebar .category-widget ul a:hover {
  color: var(--primary) !important;
}
.category-sidebar .category-widget ul li:hover:before {
  background: var(--primary) !important;
}
.category-sidebar .tag-widget ul a:hover {
  background: var(--grad-btn) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   12. Pagination
───────────────────────────────────────────────────────── */
.pagination-wrapper .pg-pagination .active a,
.pagination-wrapper .pg-pagination li a:hover {
  background: var(--grad-btn) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   13. Forms
───────────────────────────────────────────────────────── */
.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 5px 0 rgba(0,121,232,0.4) !important;
}
.contact-validation-active #loader i {
  color: var(--primary) !important;
}
.contact-validation-active #success {
  background-color: var(--secondary) !important;
  border-left: 5px solid var(--secondary-dark) !important;
}

/* ─────────────────────────────────────────────────────────
   14. Social Links
───────────────────────────────────────────────────────── */
.social-links li a {
  background-color: var(--primary) !important;
}
.social-links li a:hover {
  background-color: var(--secondary) !important;
}

/* ─────────────────────────────────────────────────────────
   15. CTA Area
───────────────────────────────────────────────────────── */
.cta-area,
.wpo-cta-section {
  background:#039004 !important;
}

/* ─────────────────────────────────────────────────────────
   16. Donate / Support Buttons
───────────────────────────────────────────────────────── */
.donate-btn,
.donate-amount .btn,
.wpo-donate-form .submit-btn {
  background: var(--grad-btn) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
}

/* ─────────────────────────────────────────────────────────
   17. Footer
───────────────────────────────────────────────────────── */
.tp-site-footer {
  background:#001900 !important;
  color: rgba(255,255,255,0.85);
}
.tp-ne-footer {
  background: var(--bg-dark) !important;
}
.tp-site-footer .widget-title h3,
.tp-site-footer .footer-logo.widget-title h3 {
  color: #fff;
  position: relative;
}
.tp-site-footer .widget-title h3:after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--grad-btn);
  margin-top: 10px;
  border-radius: 4px;
}
.tp-site-footer p {
  color: rgba(255,255,255,0.65);
}
.tp-site-footer .link-widget ul li a {
  color: rgba(255,255,255,0.70);
  transition: var(--transition);
  display: inline-block;
  padding: 4px 0;
}
.tp-site-footer .link-widget ul li a:hover {
  color: var(--secondary-light);
  padding-left: 6px;
}
.tp-site-footer .contact-ft ul li i,
.tp-site-footer .contact-ft ul li .fi {
  color: white !important;
}
.tp-site-footer .about-widget ul li a {
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.08);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.tp-site-footer .about-widget ul li a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-3px);
}
.tp-site-footer .about-widget ul {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.tp-upper-footer {
  padding: 70px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tp-lower-footer {
  background: rgba(0,0,0,0.25);
  padding: 16px 0;
}
.tp-lower-footer .copyright {
  color: rgba(255,255,255,0.5);
  margin: 0;
  font-size: 14px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   18. Project Cards
───────────────────────────────────────────────────────── */
.project-card:hover {
  box-shadow: 0 12px 30px rgba(0,121,232,0.12) !important;
  border-color: rgba(0,121,232,0.2) !important;
}
.project-badge {
  background: var(--primary) !important;
}
.project-meta span i {
  color: var(--secondary) !important;
}
.project-content h3 a {
  color: var(--text-dark) !important;
}
.project-link {
  color: var(--primary) !important;
  font-weight: 700;
}
.project-link:hover {
  color: var(--secondary) !important;
}

/* ─────────────────────────────────────────────────────────
   19. Focus Area Cards (Programs page)
───────────────────────────────────────────────────────── */
.focus-area-section {
  background-color: var(--bg-section) !important;
}
.focus-area-section::before {
  background: radial-gradient(circle, rgba(0,121,232,0.06) 0%, transparent 70%) !important;
}
.focus-card:hover {
  box-shadow: 0 20px 50px rgba(0,121,232,0.12) !important;
  border-color: rgba(0,121,232,0.2) !important;
}
.focus-icon-box {
  background: #e8f3ff !important;
  border-color: rgba(0,121,232,0.08) !important;
}
.focus-card:hover .focus-icon-box {
  background: var(--primary) !important;
}
.focus-card h3 {
  color: var(--text-dark) !important;
}

/* ─────────────────────────────────────────────────────────
   20. Accordion
───────────────────────────────────────────────────────── */
.theme-accordion-s1 .panel-heading a {
  background: var(--primary) !important;
  color: #fff !important;
}
.theme-accordion-s1 .panel-heading .collapsed {
  background-color: #fff !important;
  color: var(--text-dark) !important;
}

/* ─────────────────────────────────────────────────────────
   21. Nav sub-menu decorators
───────────────────────────────────────────────────────── */
.tp-site-header #navbar .mega-menu,
.tp-site-header #navbar .half-mega-menu {
  border-top: 2px solid var(--primary) !important;
}
.tp-site-header #navbar > ul .sub-menu {
  box-shadow: 0 10px 30px rgba(0,121,232,0.12) !important;
}

/* ─────────────────────────────────────────────────────────
   22. Mini-cart badge
───────────────────────────────────────────────────────── */
.tp-site-header .cart-search-contact .mini-cart .cart-count {
  background: var(--grad-btn) !important;
}
.tp-site-header .cart-search-contact .mini-cart-content .mini-cart-item-des a:hover {
  color: var(--primary) !important;
}

/* ─────────────────────────────────────────────────────────
   23. Scrollbar + Selection
───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}
::selection {
  background: var(--primary);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────
   24. Micro-animation: nav underline sweep
───────────────────────────────────────────────────────── */
@media screen and (min-width: 992px) {
  .tp-site-header #navbar > ul > li > a {
    position: relative;
  }
  .tp-site-header #navbar > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--grad-btn);
    border-radius: 2px;
    transition: width 0.3s ease;
  }
  .tp-site-header #navbar > ul > li > a:hover::after,
  .tp-site-header #navbar > ul > li > a.active::after {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   DEEP STYLE.CSS OVERRIDES — All Hardcoded Colors
   Targets: #ffc039 #e9bf3d (yellow), #061738 (old-dark),
   #14b761 #2db85d #03b664 #18b760 #3ac060 (old-greens)
═══════════════════════════════════════════════════════════ */

/* About Area — gradient strip behind circular image */
.about-cercle:before {
  background-image: linear-gradient(-25deg, #0079E8 0%, #039004 100%) !important;
}

/* Section title coloured spans */
.section-title h2 span:first-child { color: #0079E8 !important; }
.section-title h2 span:last-child  { color: #039004 !important; }


/* About / volunteer text links */
.ab-text h2 a:hover           { color: #0079E8 !important; }
.volunteer-content h2 a       { color: #0D1B2A !important; }
.volunteer-content h2 a:hover { color: #0079E8 !important; }

/* ── Features / Strategic Pillars ── */
.features-area   { background:linear-gradient(-25deg, #0079E8 0%, #039004 100%) !important; }

/* ── Hero Pagination Dots ── */
.hero-slider .swiper-pagination-bullets .swiper-pagination-bullet {
  background: #0079E8 !important;
}
.hero-slider .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background: #fff !important;
  border: 3px solid #039004 !important;
}

/* ── Programs / Cause ── */
.cause-top                       { background: #eef5ff !important;padding:30px;}
.cause-item                      { border-color: #dceeff !important; }
.cause-text ul li a              { background: #0079E8 !important; }
.cause-text ul li:last-child a   { background: #039004 !important; }
.cause-text h3 a:hover           { color: #0079E8 !important; }
.cause-item:before               { border-left-color:  #0079E8 !important; }
.cause-item:after                { border-right-color: #039004 !important; }
.cause-top:after                 { border-top-color:   #0079E8 !important; }
.cause-text:after                { border-top-color:   #039004 !important; }

/* ── Event Area ── */
.event-area                      { background: #eef5ff !important; }
.event-l-text                    { background: #0079E8 !important; }
.event-item:hover .event-l-text  { background: #039004 !important; }
.event-item:before {
  background:black !important;
  background:black !important;
}
.event-right ul li:first-child   { color: #039004 !important; }
.event-right ul li:last-child    { color: #0079E8 !important; }
.event-item:hover .event-right h2 a { color: #fff !important; }
.event-item .event-right h2 a:hover { color: #05C206 !important; }

/* ── Testimonials ── */
.testimonials-section            { background: #0079E8 !important; }
.testimonials-section:before     { background: #0079E8 !important; border-top-color: rgba(0,121,232,0.15) !important; }
.testimonials-section .slick-prev,
.testimonials-section .slick-next { background-color: #0079E8 !important; }
.testimonials-section .slick-prev:hover,
.testimonials-section .slick-next:hover { background-color:white !important; }
.testimonials-section .testimonial-thumb-active button i:hover { color:black !important }
.testimonials-section .grid .info p { color:white !important; }
.testimonial-content-active .grid ul li { color: #3D9CFF !important; }
.testimonial-content-active .grid .info h5 { color:white !important; }
/* Photo gradient ring */
.test-img:before {
  background:white !important;
  background: white !important;
}

/* ── Blog Area ── */
.blog-content                     { border-color: #dceeff !important; }
.blog-content ul li               { color: #0079E8 !important; }
.blog-content ul li:first-child   { color: #039004 !important; }
.blog-content h2 a                { color: #0D1B2A !important; }
.blog-content h2 a:hover          { color: #0079E8 !important; }

/* ── Partners Section ── */
.partners-section {
  background: #f4f8ff !important;
  background-image: none !important;
}

/* ── Topbar (header-style-1 & 3) ── */
.header-style-1 .topbar,
.header-style-3 .topbar { background:black !important; }
.header-style-1 .topbar .social ul a:hover,
.header-style-3 .topbar .social ul a:hover { color: #05C206 !important; }
.header-style-1 .sticky-header,
.header-style-3 .sticky-header { background: #0079E8 !important; }

/* ── Brand span in logo ── */
.header-style-2 .navigation .navbar-brand span,
.header-style-3 .navigation .navbar-brand span { color: #3D9CFF !important; }

/* ── Header-style-2 text ── */
.header-style-2 #navbar > ul li a { color: #0D1B2A !important; }
.header-style-2 .cart-search-contact .fi:before { color: #0D1B2A !important; }
.header-style-2 .navigation .navbar-brand { color: #0D1B2A !important; }

/* ─────────────────────────────────────────────────────────
   25. Responsive
───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .tp-site-header #navbar > ul > li > a::after { display: none; }
  .tp-site-footer .about-widget ul { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .tp-upper-footer { padding: 50px 0 30px; }
  .project-badge { font-size: 10px; padding: 5px 12px; }
}

/* ---------------------------------------------------------
   26. PNG Badge Image Tinting (filter-based hue shift)
   .thumb-text / .slide-thumb use PNG backgrounds with baked
   yellow tones � hue-rotate shifts them to brand blue/teal.
--------------------------------------------------------- */
.thumb-text {
  color: #fff !important;
}
.hero-style-1 .slide-thumb {
  color: #fff !important;
}
/* .ab-shape img,
.slide-shape img {
} */

/* PNG badge tinting */
/* .thumb-text{filter:hue-rotate(185deg) saturate(1.5) !important;color:#fff !important;}
.hero-style-1 .slide-thumb{filter:hue-rotate(185deg) saturate(1.5) !important;}
.ab-shape img,.slide-shape img{filter:hue-rotate(185deg) saturate(1.2) !important;} */