@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,200..700&family=Cairo:wght@200;300;400;600;800&display=swap');

/* ============================================================
   SMART SOLIDARITY — THEME LAYER
   ------------------------------------------------------------
   Ports the approved prototype design onto the live templates.
   Purely visual: no logic, no queries, no PHP.
   Loaded AFTER css/style.css and overrides it.
   Delete this file and the site returns to its old look with
   every function untouched.
   ============================================================ */


:root{
  --primary:#CA262A;
  --primary-dark:#A81D21;
  --red-soft:#E8484C;
  --secondary:#48484A;
  --night:#141416;
  --night-2:#1C1C1F;
  --mist:rgba(255,255,255,.06);
  --mist-2:rgba(255,255,255,.12);
  --txt-dim:#9E9EA6;
  --r:22px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---------- canvas ---------- */
html,body{ background:var(--night) !important; }
body{
  color:#E9E9ED !important;
  font-family:"Archivo","Cairo",sans-serif !important;
  font-size:16px; line-height:1.6;
}
[dir="rtl"] body{ font-family:"Cairo",sans-serif !important; }
.container{ max-width:1220px; }

h1,h2,h3,h4,h5,h6{
  font-variation-settings:"wdth" 92; font-weight:300 !important;
  letter-spacing:-.028em; line-height:1.04; color:#fff;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ letter-spacing:0; line-height:1.42; }
h1 b,h2 b,h3 b,strong{ font-weight:600 !important; }
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-weight:300 !important; letter-spacing:-.028em;
}
p,li,td,.lead{ color:var(--txt-dim) !important; font-weight:300; }
.text-muted{ color:var(--txt-dim) !important; }
.text-dark,.text-black{ color:#E9E9ED !important; }
hr{ border-color:var(--mist-2); opacity:1; }

/* ---------- surfaces ---------- */
.bg-white,.bg-light,section.bg-light{ background:var(--night-2) !important; }
.bg-dark{ background:var(--night) !important; }

/* ---------- top bar ---------- */
.language-bar{ background:var(--night-2) !important; border-bottom:1px solid var(--mist); font-size:13px; }
.language-bar a{ color:var(--txt-dim) !important; }
.language-bar a:hover{ color:#fff !important; }
.language-bar .btn-light{
  background:rgba(255,255,255,.06) !important; color:#fff !important;
  border:1px solid var(--mist-2) !important; border-radius:100px; padding:5px 15px; font-size:12px;
}
.language-bar .btn-light:hover{ background:rgba(255,255,255,.14) !important; }

/* ---------- navigation ---------- */
.navbar{
  background:rgba(20,20,22,.72) !important;
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--mist);
  box-shadow:none !important;
}
.navbar-brand img{ height:32px !important; }
.navbar .nav-link{
  color:#D6D6DC !important; font-size:14px; font-weight:400; padding:6px 14px !important; position:relative;
}
.navbar .nav-link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:0; height:1px;
  background:var(--red-soft); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.navbar .nav-link:hover{ color:#fff !important; }
.navbar .nav-link:hover::after{ transform:scaleX(1); }
.navbar .dropdown-toggle::after{ opacity:.45; }
.navbar-toggler{ border-color:var(--mist-2); }
.navbar-toggler-icon{ filter:invert(1) brightness(2); }
.dropdown-menu{
  background:rgba(28,28,31,.96) !important; backdrop-filter:blur(20px);
  border:1px solid var(--mist-2); border-radius:16px; padding:7px; box-shadow:0 30px 70px -30px #000;
}
.dropdown-item{ color:#D6D6DC !important; border-radius:11px; padding:11px 15px; font-size:15px; }
.dropdown-item:hover{ background:var(--primary) !important; color:#fff !important; }

/* ---------- buttons ---------- */
.btn-cec,.btn-primary{
  background:var(--primary) !important; border:0 !important; color:#fff !important;
  border-radius:100px !important; padding:14px 26px !important; font-weight:600 !important;
  font-size:14.5px !important; letter-spacing:0 !important; text-transform:none !important;
  box-shadow:0 8px 26px -10px rgba(202,38,42,.9);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.btn-cec:hover,.btn-primary:hover{
  background:var(--primary) !important; transform:translateY(-2px);
  box-shadow:0 16px 38px -12px rgba(202,38,42,1);
}
.btn-outline-cec,.btn-outline-primary,.btn-outline-light{
  background:rgba(255,255,255,.07) !important; border:1px solid var(--mist-2) !important;
  color:#fff !important; border-radius:100px !important; padding:13px 24px !important;
  font-weight:600 !important; font-size:14.5px !important; text-transform:none !important; box-shadow:none !important;
}
.btn-outline-cec:hover,.btn-outline-primary:hover,.btn-outline-light:hover{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
}
.btn-sm{ padding:9px 18px !important; font-size:13.5px !important; }

/* ---------- hero ---------- */
.hero-section{
  background:var(--night) !important; min-height:92vh; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding-block:150px clamp(28px,5vw,54px);
}
.hero-section .hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,var(--night) 4%,rgba(20,20,22,.86) 42%,rgba(20,20,22,.55) 100%),
    radial-gradient(70% 55% at 78% 22%,rgba(202,38,42,.5),transparent 68%),
    radial-gradient(50% 40% at 8% 88%,rgba(202,38,42,.22),transparent 70%) !important;
}
.hero-section .container{ position:relative; z-index:3; }
.hero-section h1{
  font-size:clamp(38px,6.4vw,86px) !important; font-weight:300 !important;
  letter-spacing:-.028em; line-height:1.02 !important; max-width:17ch;
}
[dir="rtl"] .hero-section h1{ line-height:1.4 !important; letter-spacing:0; }
.hero-section .lead{
  color:#C4C4CC !important; font-size:clamp(15px,1.4vw,17.5px) !important;
  max-width:46ch; font-weight:300;
}
.hero-decoration{ display:none; }

/* ---------- page headers ---------- */
.page-header{
  background:var(--night) !important; position:relative; overflow:hidden;
  padding-block:clamp(90px,14vh,150px) clamp(40px,6vh,70px);
}
.page-header::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 82% 14%,rgba(202,38,42,.42),transparent 70%);
}
.page-header .container{ position:relative; z-index:2; }
.page-header h1{ font-size:clamp(30px,4.6vw,58px) !important; }
.breadcrumb-item,.breadcrumb-item a,.breadcrumb-item.active{ color:var(--txt-dim) !important; }

/* ---------- section titles ---------- */
.section-title{ margin-bottom:clamp(28px,4vw,46px); }
.section-title::after{ width:44px; height:2px; background:var(--red-soft); border-radius:0; }

/* ---------- cards ---------- */
.course-card,.feature-card,.blog-card,.stat-card,.achievement-card,
.accreditation-card,.contact-info-box,.card,.timeline-content,.gallery-item{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;
  border:1px solid var(--mist-2) !important;
  border-radius:var(--r) !important;
  box-shadow:none !important;
  color:#E9E9ED !important;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.course-card::before,.feature-card::before,.blog-card::before{
  content:''; position:absolute; inset:-40% 45% 55% -25%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side,rgba(202,38,42,.55),transparent);
  opacity:0; transition:opacity .4s;
}
.course-card:hover,.feature-card:hover,.blog-card:hover,.stat-card:hover,
.achievement-card:hover,.accreditation-card:hover,.contact-info-box:hover,.card:hover{
  transform:translateY(-5px);
  border-color:rgba(232,72,76,.55) !important;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95) !important;
}
.course-card:hover::before,.feature-card:hover::before,.blog-card:hover::before{ opacity:1; }
.course-card > *,.feature-card > *,.blog-card > *{ position:relative; z-index:2; }
.card-body,.course-card-body,.blog-card-body{ padding:26px !important; background:transparent !important; }
.card-title,.course-card h5,.blog-card h5{ font-size:22px !important; font-weight:500 !important; color:#fff !important; }
.card-text,.course-card p,.blog-card p{ font-size:14.5px !important; color:var(--txt-dim) !important; }

.course-category{
  color:var(--red-soft) !important; background:transparent !important; border:0 !important;
  font-size:11.5px !important; letter-spacing:.16em; text-transform:uppercase; padding:0 !important;
}
.badge{
  background:rgba(255,255,255,.06) !important; color:#C4C4CC !important; border:0 !important;
  border-radius:100px !important; padding:5px 11px !important; font-size:12px !important; font-weight:400 !important;
}
.course-price{ color:#fff !important; font-weight:600 !important; }
.course-meta-grid .meta-item{
  background:rgba(255,255,255,.05) !important; border:0 !important;
  border-radius:100px !important; padding:6px 12px !important; font-size:12.5px; color:#C4C4CC !important;
}
.course-placeholder{
  background:linear-gradient(160deg,var(--night-2),#2A1416) !important;
  color:rgba(255,255,255,.35) !important; min-height:160px;
  display:flex; align-items:center; justify-content:center;
}
.feature-icon{
  background:rgba(255,255,255,.06) !important; color:var(--red-soft) !important;
  border-radius:16px !important; transition:.3s;
}
.feature-card:hover .feature-icon{ background:var(--primary) !important; color:#fff !important; }

.stat-card h2,.stat-card h3,.stat-card .display-4{
  font-weight:200 !important; font-variation-settings:"wdth" 92; letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff 20%,var(--red-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
[dir="rtl"] .stat-card h2,[dir="rtl"] .stat-card h3{ font-weight:800 !important; }

.timeline-marker{ background:var(--primary) !important; box-shadow:0 0 0 4px rgba(202,38,42,.2) !important; }

/* ---------- accreditation strip ---------- */
.accred-band{ background:var(--night-2) !important; border-block:1px solid var(--mist); }
.accred-strip{
  background:#fff; border-radius:20px; padding:26px 0; overflow:hidden; margin-top:30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.accred-track{ display:flex; width:max-content; animation:accredRoll 42s linear infinite; }
.accred-strip:hover .accred-track{ animation-play-state:paused; }
@keyframes accredRoll{ to{ transform:translateX(-50%); } }
.accred-set{ display:flex; align-items:center; }
.accred-set > div{ width:150px; height:46px; flex:0 0 auto; padding:0 14px; display:flex; align-items:center; justify-content:center; }
.accred-set img{
  max-height:100%; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.5; transition:.35s;
}
.accred-set > div:hover img{ filter:none; opacity:1; transform:scale(1.08); }
@media (prefers-reduced-motion: reduce){ .accred-track{ animation:none; } }

.accred-note{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--mist-2); border-radius:var(--r); padding:clamp(24px,3vw,34px); height:100%;
}
.accred-note h5{ font-size:23px; font-weight:500 !important; color:#fff; margin-bottom:12px; letter-spacing:-.02em; }
.accred-note p{ font-size:14.5px; color:var(--txt-dim) !important; margin:0; }
.accred-note-key{ border-color:rgba(232,72,76,.4); box-shadow:0 0 60px -34px rgba(202,38,42,1) inset; }
.accred-note-key h5{ color:var(--red-soft); }

/* ---------- forms ---------- */
.form-control,.form-select,textarea{
  background:rgba(255,255,255,.04) !important; border:1px solid var(--mist-2) !important;
  color:#fff !important; border-radius:14px !important; padding:14px 16px !important; font-size:15px;
}
.form-control::placeholder{ color:#7E7E88 !important; }
.form-control:focus,.form-select:focus{
  border-color:var(--red-soft) !important; box-shadow:0 0 0 3px rgba(232,72,76,.15) !important;
  background:rgba(255,255,255,.06) !important;
}
.form-select option{ background:var(--night-2); color:#fff; }
.form-label{ color:#C4C4CC !important; font-weight:500; font-size:13.5px; }
.input-group-text{ background:rgba(255,255,255,.05) !important; border-color:var(--mist-2) !important; color:var(--txt-dim) !important; }

/* ---------- tables ---------- */
.table,.comparison-table{ color:#E9E9ED !important; }
.table th,.comparison-table th{
  background:var(--night-2) !important; color:#fff !important;
  border-color:var(--mist-2) !important; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.table td,.comparison-table td{ border-color:var(--mist) !important; color:var(--txt-dim) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ background:rgba(255,255,255,.02) !important; color:inherit !important; }

/* ---------- CTA band ---------- */
.cta-section{ background:var(--night) !important; position:relative; overflow:hidden; }
.cta-section::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 15% 30%,rgba(202,38,42,.42),transparent 70%),
    radial-gradient(55% 55% at 88% 78%,rgba(202,38,42,.28),transparent 70%);
}
.cta-section .container{ position:relative; z-index:2; }

/* ---------- footer ---------- */
.footer{ background:var(--night-2) !important; border-top:1px solid var(--mist); }
.footer h5{ color:#fff; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin-bottom:16px; }
.footer p,.footer li,.footer a{ color:var(--txt-dim) !important; font-weight:300; font-size:14.5px; }
.footer a:hover{ color:#fff !important; }
.social-links a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--mist-2);
  display:inline-flex; align-items:center; justify-content:center; transition:.3s;
}
.social-links a:hover{ background:var(--primary); border-color:var(--primary); transform:translateY(-3px); }

/* ---------- popups ---------- */
.cookies-popup,.newsletter-popup,.modal-content{
  background:rgba(28,28,31,.97) !important; border:1px solid var(--mist-2) !important;
  border-radius:var(--r) !important; color:#E9E9ED !important; backdrop-filter:blur(20px);
}
.modal-header,.modal-footer{ border-color:var(--mist-2) !important; }
.btn-close{ filter:invert(1) brightness(2); }

/* ---------- misc ---------- */
.page-link{ background:rgba(255,255,255,.04) !important; border-color:var(--mist-2) !important; color:#C4C4CC !important; }
.page-item.active .page-link{ background:var(--primary) !important; border-color:var(--primary) !important; }
.alert{ border-radius:16px; border:1px solid var(--mist-2); background:rgba(255,255,255,.04); color:#E9E9ED; }
.accordion-item{ background:transparent; border:1px solid var(--mist-2); border-radius:16px !important; overflow:hidden; margin-bottom:10px; }
.accordion-button{ background:rgba(255,255,255,.04) !important; color:#fff !important; }
.accordion-button:not(.collapsed){ background:var(--primary) !important; color:#fff !important; box-shadow:none; }
.accordion-body{ background:transparent; color:var(--txt-dim); }

/* ---------- motion, in and out, tied to scroll ---------- */
@keyframes ssIn{
  0%{ opacity:0; transform:translateY(30px) }
  16%,88%{ opacity:1; transform:none }
  100%{ opacity:0; transform:translateY(-20px) }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .course-card,.feature-card,.blog-card,.stat-card,.achievement-card,
    .accreditation-card,.contact-info-box,.timeline-item,.section-title,.accred-note{
      animation:ssIn linear both; animation-timeline:view(); animation-range:cover 0% cover 100%;
    }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 991px){
  .hero-section{ min-height:auto; padding-block:120px 50px; }
  .hero-section h1{ font-size:2rem !important; }
  .navbar-brand img{ height:28px !important; }
  .accred-set > div{ width:112px; height:34px; }
}

/* ---------- RTL ---------- */
[dir="rtl"] .navbar .nav-link::after{ transform-origin:right; }

/* ============================================================
   PART 2 — completeness pass
   every remaining component found in the templates
   ============================================================ */

/* ---------- semantic colours on a dark canvas ---------- */
.text-cec{ color:var(--red-soft) !important; }
.text-primary{ color:var(--red-soft) !important; }
.text-success{ color:#4ADE80 !important; }
.text-warning{ color:#FBBF24 !important; }
.text-danger{ color:var(--red-soft) !important; }
.text-info{ color:#60C5F1 !important; }
.text-white{ color:#fff !important; }
.text-secondary{ color:var(--txt-dim) !important; }

.bg-primary{ background:var(--primary) !important; }
.bg-secondary{ background:rgba(255,255,255,.08) !important; color:#D6D6DC !important; }
.bg-warning{ background:rgba(251,191,36,.16) !important; color:#FBBF24 !important; }
.bg-danger{ background:rgba(232,72,76,.18) !important; color:var(--red-soft) !important; }
.bg-success{ background:rgba(74,222,128,.16) !important; color:#4ADE80 !important; }
.bg-info{ background:rgba(96,197,241,.16) !important; color:#60C5F1 !important; }

/* ---------- every button variant ---------- */
.btn-secondary,.btn-info,.btn-success,.btn-warning,.btn-danger,.btn-dark,.btn-light{
  border-radius:100px !important; padding:13px 24px !important; font-weight:600 !important;
  font-size:14.5px !important; border:1px solid var(--mist-2) !important;
  background:rgba(255,255,255,.07) !important; color:#fff !important; box-shadow:none !important;
  transition:transform .25s var(--ease), background .25s;
}
.btn-secondary:hover,.btn-info:hover,.btn-success:hover,.btn-warning:hover,
.btn-danger:hover,.btn-dark:hover,.btn-light:hover{
  background:rgba(255,255,255,.15) !important; color:#fff !important; transform:translateY(-2px);
}
.btn-danger{ background:var(--primary) !important; border-color:var(--primary) !important; }
.btn-danger:hover{ background:var(--primary-dark) !important; }
.btn-outline-secondary,.btn-outline-dark,.btn-outline-info,
.btn-outline-success,.btn-outline-warning,.btn-outline-danger{
  background:transparent !important; border:1px solid var(--mist-2) !important;
  color:#D6D6DC !important; border-radius:100px !important; padding:12px 22px !important;
  font-weight:600 !important; font-size:14px !important;
}
.btn-outline-secondary:hover,.btn-outline-dark:hover,.btn-outline-info:hover,
.btn-outline-success:hover,.btn-outline-warning:hover,.btn-outline-danger:hover{
  background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.3) !important;
}
.btn-lg{ padding:16px 32px !important; font-size:15.5px !important; }
.btn-group .btn{ border-radius:0 !important; }
.btn-group .btn:first-child{ border-radius:100px 0 0 100px !important; }
.btn-group .btn:last-child{ border-radius:0 100px 100px 0 !important; }
[dir="rtl"] .btn-group .btn:first-child{ border-radius:0 100px 100px 0 !important; }
[dir="rtl"] .btn-group .btn:last-child{ border-radius:100px 0 0 100px !important; }

/* ---------- card sub-parts ---------- */
.card-header{
  background:rgba(255,255,255,.05) !important; border-bottom:1px solid var(--mist-2) !important;
  color:#fff !important; padding:18px 26px !important; font-weight:600;
}
.card-footer{ background:rgba(255,255,255,.03) !important; border-top:1px solid var(--mist-2) !important; }
.card-img-top{ border-radius:0 !important; }
.card.border-0,.border-0{ border:1px solid var(--mist-2) !important; }
.shadow,.shadow-lg,.shadow-sm{ box-shadow:none !important; }
.border-bottom{ border-color:var(--mist-2) !important; }
.border-danger{ border-color:rgba(232,72,76,.5) !important; }

/* ---------- alerts ---------- */
.alert-success{ background:rgba(74,222,128,.1) !important; border-color:rgba(74,222,128,.35) !important; color:#8BE9AC !important; }
.alert-danger{ background:rgba(232,72,76,.12) !important; border-color:rgba(232,72,76,.4) !important; color:#FFB4B6 !important; }
.alert-warning{ background:rgba(251,191,36,.1) !important; border-color:rgba(251,191,36,.35) !important; color:#FBD87A !important; }
.alert-info{ background:rgba(96,197,241,.1) !important; border-color:rgba(96,197,241,.35) !important; color:#A7DDF7 !important; }

/* ---------- checkboxes and radios ---------- */
.form-check-input{
  background:rgba(255,255,255,.06) !important; border:1px solid var(--mist-2) !important;
}
.form-check-input:checked{ background:var(--primary) !important; border-color:var(--primary) !important; }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(232,72,76,.18) !important; border-color:var(--red-soft) !important; }
.form-check-label{ color:#C4C4CC !important; font-weight:300; }

/* ---------- tables, the remaining variants ---------- */
.table-responsive{ border-radius:var(--r); border:1px solid var(--mist-2); overflow:auto; }
.table-bordered,.table-bordered td,.table-bordered th{ border-color:var(--mist-2) !important; }
.table-light,.table-light th,.table-light td{ background:rgba(255,255,255,.05) !important; color:#fff !important; }
.table > :not(caption) > * > *{ background-color:transparent !important; box-shadow:none !important; }
.table-hover > tbody > tr:hover > *{ background:rgba(255,255,255,.05) !important; color:#fff !important; }

/* ---------- carousel / slider ---------- */
.carousel-item{ min-height:inherit; }
.carousel-indicators [data-bs-target]{
  width:32px; height:3px; border-radius:0; background:rgba(255,255,255,.35); border:0;
}
.carousel-indicators .active{ background:var(--red-soft); }
.carousel-control-prev,.carousel-control-next{ width:8%; opacity:.5; }
.carousel-control-prev:hover,.carousel-control-next:hover{ opacity:1; }
.carousel-control-prev-icon,.carousel-control-next-icon{
  width:44px; height:44px; border-radius:50%; background-color:rgba(0,0,0,.45);
  background-size:44% 44%; border:1px solid var(--mist-2);
}

/* ---------- gallery ---------- */
.gallery-item{ border-radius:var(--r) !important; overflow:hidden; }
.gallery-overlay{
  background:linear-gradient(to top,rgba(20,20,22,.92),transparent 70%) !important;
  color:#fff !important;
}
.gallery-overlay h5,.gallery-overlay p{ color:#fff !important; }

/* ---------- testimonials ---------- */
.testimonial-avatar{ border:2px solid var(--mist-2) !important; background:rgba(255,255,255,.06); }

/* ---------- contact page blocks ---------- */
.contact-details,.reach-us-info{ color:var(--txt-dim) !important; }
.contact-details a,.reach-us-info a{ color:#D6D6DC !important; }
.contact-details a:hover,.reach-us-info a:hover{ color:var(--red-soft) !important; }
.contact-info-box i{ color:var(--red-soft) !important; }

/* ---------- evaluation and long forms ---------- */
.evaluation-form,.evaluation-form .card{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  border:1px solid var(--mist-2) !important; border-radius:var(--r) !important;
}
.evaluation-form label,.evaluation-form legend{ color:#C4C4CC !important; }

/* ---------- popups, remaining parts ---------- */
.cookies-content,.newsletter-content{ color:#E9E9ED !important; }
.cookies-content p,.newsletter-content p{ color:var(--txt-dim) !important; }
.close-popup{
  background:rgba(255,255,255,.08) !important; border:1px solid var(--mist-2) !important;
  color:#fff !important; border-radius:50%; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
}
.close-popup:hover{ background:var(--primary) !important; border-color:var(--primary) !important; }

/* ---------- blog meta ---------- */
.blog-meta,.blog-meta span,.blog-meta a{ color:var(--txt-dim) !important; font-size:12.5px; }
.blog-meta a:hover{ color:var(--red-soft) !important; }

/* ---------- footer links ---------- */
.footer-links a{ display:inline-block; transition:color .25s, padding .25s; }
.footer-links a:hover{ padding-left:5px; }
[dir="rtl"] .footer-links a:hover{ padding-left:0; padding-right:5px; }

/* ---------- header slider height ---------- */
.min-vh-70{ min-height:70vh; }

/* ---------- anything still white slipping through ---------- */
.card-body,.card-header,.accordion-body,.list-group-item{ background:transparent !important; }
.list-group-item{ border-color:var(--mist-2) !important; color:#D6D6DC !important; }
.nav-tabs{ border-color:var(--mist-2) !important; }
.nav-tabs .nav-link{ color:var(--txt-dim) !important; border:0 !important; }
.nav-tabs .nav-link.active{ background:transparent !important; color:#fff !important; border-bottom:2px solid var(--primary) !important; }
.tooltip-inner,.popover{ background:var(--night-2) !important; color:#E9E9ED !important; }
.spinner-border{ color:var(--red-soft) !important; }
::selection{ background:var(--primary); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--night); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); }

/* ---------- print ---------- */
@media print{
  html,body{ background:#fff !important; color:#111 !important; }
  .navbar,.language-bar,.footer,.cookies-popup,.newsletter-popup{ display:none !important; }
  .card,.course-card{ background:#fff !important; border:1px solid #ddd !important; color:#111 !important; }
}

/* structural wrappers that need no paint but must not inherit a light background */
.accordion-header,.accordion-collapse,.carousel-inner{ background:transparent !important; }
.accordion-header button{ box-shadow:none !important; }

/* ============================================================
   PART 3 — robustness and corrections found in live testing
   ============================================================ */

/* AOS is loaded from a CDN and hides [data-aos] elements until it initialises.
   If that script is ever blocked or slow, the page would look empty.
   This guarantees content is visible; AOS adds .aos-init when it works,
   which switches this safety net off and lets the animation run normally. */
[data-aos]:not(.aos-init){ opacity:1 !important; transform:none !important; }

/* the brand mark was too small and too dim on the dark bar */
.navbar-brand img{ height:46px !important; filter:brightness(1.35) contrast(1.05); }
@media (max-width:991px){ .navbar-brand img{ height:38px !important; } }

/* accreditation logos were washed out against the white plate */
.accred-set img{ opacity:.72; }
.accred-strip{ box-shadow:0 24px 60px -40px rgba(0,0,0,.9); }

/* empty states should read as intentional, not broken */
.text-center .text-muted:only-child{ padding-block:18px; display:block; }

/* ============================================================
   PART 4 — inner pages adopt the homepage chrome
   home.css supplies the header, footer and design tokens.
   These rules make the Bootstrap page bodies sit inside it.
   ============================================================ */

/* the prototype header is fixed-height; give the content room */
body{ padding-top:0; }
.page-header{ padding-top:clamp(120px,16vh,180px) !important; }
main, .page-header + section, section:first-of-type{ position:relative; z-index:2; }

/* the prototype container width, applied to Bootstrap's grid */
.container{ max-width:1240px !important; padding-inline:clamp(20px,5vw,72px) !important; }

/* Bootstrap sections inherit the prototype rhythm */
section.py-5{ padding-block:clamp(50px,8vh,96px) !important; }

/* the prototype's glass card, mapped onto every Bootstrap card */
.card,.course-card,.feature-card,.blog-card,.stat-card,.achievement-card,
.accreditation-card,.contact-info-box,.timeline-content,.gallery-item{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:22px !important;
}

/* filter bars and toolbars read as the prototype's chip row */
.form-select,.form-control{ border-radius:14px !important; }
.btn-cec,.btn-primary{ border-radius:100px !important; }

/* footer partial carries its own layout, so neutralise the old footer rules */
.footer{ background:transparent !important; border:0 !important; }