/* =============================================================
   Swaasthya Hospitals — Main Stylesheet
   Bootstrap 5.3 + Custom Design
   ============================================================= */

:root {
  /* ---- Swaasthya brand palette (from logo) ---- */
  --sh-blue:        #1E51A4;  /* Hospital Blue — primary */
  --sh-orange:      #F58220;  /* Healing Orange — CTA */
  --sh-gold-light:  #F9A11B;  /* Warm Gold — decorative */
  --sh-red:         #E32526;  /* Wellness Red — alerts */
  --sh-orange-dark: #F04F23;  /* Sunrise Orange — secondary/gradients */
  --sh-navy:        #153C7A;  /* Deep Blue — hero, footer */
  --sh-burnt:       #C96517;  /* Burnt Orange — orange text on white */
  --sh-cream:       #FFF8F1;  /* Warm Cream — alt backgrounds */
  --sh-blue-light:  #EDF4FC;  /* Soft Blue Wash — cards, forms */
  --sh-white:       #FFFFFF;
  --sh-text:        #1F2937;
  --sh-text-light:  #6B7280;

  /* ---- Semantic aliases used across the site ---- */
  --sw-blue:        var(--sh-blue);
  --sw-blue-dark:   var(--sh-navy);
  --sw-blue-light:  var(--sh-blue-light);
  --sw-green:       var(--sh-orange-dark);  /* legacy accent → Sunrise Orange */
  --sw-green-light: #FDE4DC;                /* soft sunrise wash */
  --sw-orange:      var(--sh-orange);
  --sw-orange-dark: var(--sh-orange-dark);
  --sw-gold:        var(--sh-gold-light);
  --sw-burnt:       var(--sh-burnt);
  --sw-navy:        var(--sh-navy);
  --sw-cream:       var(--sh-cream);
  --sw-red:         var(--sh-red);
  --sw-white:       #FFFFFF;
  --sw-gray-50:     #F8F9FA;
  --sw-gray-100:    #F1F3F5;
  --sw-gray-200:    #E9ECEF;
  --sw-gray-400:    #CED4DA;
  --sw-gray-600:    #6B7280;
  --sw-gray-800:    #343A40;
  --sw-dark:        #10233F;  /* deep brand navy — headings, footer, hero */
  --sw-text:        #1F2937;
  --font-primary:   'Arima Koshi', 'Arima', 'Noto Sans Telugu', system-ui, sans-serif;
  --font-body:      'Lato', 'Noto Sans Telugu', system-ui, sans-serif;
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06);
  --shadow-md:      0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.14);
  --transition:     all .25s ease;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--sw-text); line-height: 1.65; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-primary); font-weight: 700; color: var(--sw-dark); }
a { color: var(--sw-blue); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--sw-blue-dark); }
img { max-width: 100%; height: auto; }

/* Telugu font support */
.lang-te { font-family: 'Noto Sans Telugu', 'Lato', system-ui, sans-serif; }
.lang-te h1, .lang-te h2, .lang-te h3, .lang-te h4 { font-family: 'Noto Sans Telugu', 'Arima Koshi', 'Arima', system-ui, sans-serif; }

/* ---- Top Ribbon ---- */
.top-ribbon {
  background: var(--sw-dark);
  color: #adb5bd;
  font-size: .8rem;
  padding: .45rem 0;
  position: relative;
  z-index: 1100;
}
.top-ribbon a { color: #adb5bd; text-decoration: none; }
.top-ribbon a:hover { color: var(--sw-white); }
.ribbon-info li { display: flex; align-items: center; gap: .3rem; }
.ribbon-info .bi { font-size: .9rem; }
.ribbon-sep { color: #495057; }
.ribbon-social { font-size: 1rem; color: #adb5bd; transition: var(--transition); }
.ribbon-social:hover { color: var(--sw-blue); }
.ribbon-admin-link { font-size: .95rem; color: #adb5bd; opacity: .7; transition: var(--transition); line-height: 1; }
.ribbon-admin-link:hover { color: var(--sw-white); opacity: 1; }
.btn-ribbon {
  background: var(--sw-orange); color: var(--sw-dark) !important; border: none;
  border-radius: 4px; padding: .2rem .7rem; font-size: .78rem; font-weight: 600;
}
.btn-ribbon:hover { background: var(--sw-gold); color: var(--sw-dark) !important; }
.btn-ribbon-outline {
  border: 1px solid rgba(255,255,255,.3); color: #adb5bd !important; background: transparent;
  border-radius: 4px; padding: .2rem .7rem; font-size: .78rem;
}
.btn-ribbon-outline:hover { border-color: #fff; color: #fff !important; }
.lang-switcher { display: flex; gap: 2px; }
.lang-btn {
  padding: .18rem .55rem; border-radius: 3px; font-size: .78rem;
  color: #adb5bd; transition: var(--transition);
}
.lang-btn:hover, .lang-btn.active { background: var(--sw-blue); color: #fff !important; }

/* ---- Main Header ---- */
.main-header {
  background: var(--sw-white);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1090;
}
.navbar { padding: .6rem 0; }
.brand-logo { display: flex; align-items: center; gap: .75rem; }
.logo-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--sw-blue), var(--sw-blue-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; flex-shrink: 0;
}
.brand-name {
  display: block; font-family: var(--font-primary); font-weight: 700;
  font-size: 1.1rem; color: var(--sw-dark); line-height: 1.1;
}
.brand-sub { display: block; font-size: .65rem; color: var(--sw-gray-600); }
.nav-link {
  font-weight: 500; color: var(--sw-gray-800) !important; font-size: .9rem;
  padding: .5rem .6rem !important; transition: var(--transition);
}
.nav-link:hover, .nav-link:focus { color: var(--sw-blue) !important; }
.dropdown-menu { border: none; box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: .5rem 0; min-width: 220px; }
.dropdown-item { font-size: .875rem; padding: .5rem 1.2rem; color: var(--sw-gray-800); }
.dropdown-item:hover { background: var(--sw-blue-light); color: var(--sw-blue); }
.dropdown-menu-specialities { min-width: 260px; }
.btn-book-nav {
  --bs-btn-color: var(--sw-dark); --bs-btn-bg: var(--sw-orange); --bs-btn-border-color: var(--sw-orange);
  --bs-btn-hover-color: var(--sw-dark); --bs-btn-hover-bg: var(--sw-gold); --bs-btn-hover-border-color: var(--sw-gold);
  --bs-btn-active-color: var(--sw-dark); --bs-btn-active-bg: var(--sw-gold); --bs-btn-active-border-color: var(--sw-gold);
  --bs-btn-focus-shadow-rgb: 245,130,32;
  background: var(--sw-orange); color: var(--sw-dark) !important; border-color: var(--sw-orange); border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 700; padding: .45rem 1rem;
  box-shadow: 0 2px 8px rgba(245,130,32,.35);
}
.btn-book-nav:hover { background: var(--sw-gold); color: var(--sw-dark) !important; border-color: var(--sw-gold); box-shadow: 0 4px 14px rgba(245,130,32,.45); }
/* Shared "Book Appointment" CTA color — used everywhere so all appointment buttons match the hero CTA */
.btn-book-cta { background: var(--sw-orange); color: var(--sw-dark) !important; border-color: var(--sw-orange); font-weight: 700; }
.btn-book-cta:hover, .btn-book-cta:focus, .btn-book-cta:active { background: var(--sw-gold); color: var(--sw-dark) !important; border-color: var(--sw-gold); }

/* ---- Hero Slider ---- */
.hero-section { position: relative; overflow: hidden; }
.hero-slide {
  min-height: 560px;
  background: linear-gradient(135deg, var(--sw-dark) 0%, #1a3a6b 100%);
  display: flex; align-items: center; position: relative;
  padding: 5rem 0;
}
.hero-slide::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--hero-bg, url('/assets/img/hero-bg.jpg')) center top / cover no-repeat;
}
.hero-slide .container { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(16,35,63,.85); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 99px; padding: .3rem 1rem; font-size: .8rem;
  font-weight: 600; margin-bottom: 1.5rem; backdrop-filter: blur(4px);
}
.hero-title { font-size: clamp(2rem, 5vw, 3.5rem); color: #fff; line-height: 1.15; margin-bottom: 1rem; text-shadow: 0 2px 16px rgba(10,22,40,.9), 0 1px 3px rgba(10,22,40,.7); }
.hero-title span { color: var(--sw-gold); }
.hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,.92); max-width: 520px; margin-bottom: 2rem; text-shadow: 0 1px 10px rgba(10,22,40,.85), 0 1px 2px rgba(10,22,40,.6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-hero-primary {
  background: var(--sw-orange); color: var(--sw-dark); border: none;
  padding: .75rem 1.75rem; border-radius: var(--radius-sm); font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 15px rgba(245,130,32,.4); transition: var(--transition);
}
.btn-hero-primary:hover { background: var(--sw-gold); color: var(--sw-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,130,32,.5); }
.btn-hero-outline {
  background: var(--sw-blue); color: #fff; border: 2px solid var(--sw-blue);
  padding: .75rem 1.75rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; transition: var(--transition);
  box-shadow: 0 4px 15px rgba(30,81,164,.4);
}
.btn-hero-outline:hover { background: var(--sw-blue-dark); border-color: var(--sw-blue-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30,81,164,.5); }
.btn-hero-green {
  background: var(--sw-green); color: #fff; border: none;
  padding: .75rem 1.75rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; transition: var(--transition);
}
.btn-hero-green:hover { background: #C63A12; transform: translateY(-1px); }
.carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 99px; opacity: .5; }
.carousel-indicators .active { opacity: 1; width: 24px; }
.carousel-control-prev, .carousel-control-next { width: 3.5rem; }

/* ---- Sections Common ---- */
.section-pad { padding: 5rem 0; }
.section-pad-sm { padding: 3.5rem 0; }
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: .5rem; }
.section-subtitle { color: var(--sw-gray-600); font-size: 1.05rem; max-width: 600px; }
.section-divider { width: 48px; height: 4px; background: var(--sw-blue); border-radius: 99px; margin: 1rem auto 2.5rem; }
.section-divider.left { margin-left: 0; }
.bg-soft { background: var(--sw-gray-50); }
.bg-blue-light { background: var(--sw-blue-light); }

/* ---- Quick Actions ---- */
.quick-action-card {
  text-align: center; padding: 2rem 1.25rem;
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: var(--transition);
  border: 1px solid var(--sw-gray-200); cursor: pointer;
  text-decoration: none; color: var(--sw-dark);
  display: block;
}
.quick-action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--sw-blue); border-color: var(--sw-blue); }
.quick-action-icon {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin: 0 auto 1rem;
}
.quick-action-card h5 { font-size: .95rem; font-weight: 600; margin: 0; }

/* ---- Card Styles ---- */
.sw-card {
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border: 1px solid var(--sw-gray-200);
  overflow: hidden; transition: var(--transition);
}
.sw-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sw-card-img { width: 100%; height: 220px; object-fit: cover; }
.sw-card-body { padding: 1.5rem; }
.sw-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }

/* ---- Doctor Cards ---- */
.doctor-card {
  background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); border: 1px solid var(--sw-gray-200);
  overflow: hidden; transition: var(--transition); text-align: center;
}
.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.doctor-photo {
  width: 100%; height: 240px; object-fit: cover; object-position: top;
  background: var(--sw-blue-light);
}
.doctor-photo-placeholder {
  width: 100%; height: 240px; background: var(--sw-blue-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: var(--sw-blue);
}
/* Speciality overview — enlarge specialist photos to match the doctor profile page */
.speciality-doctors .doctor-photo,
.speciality-doctors .doctor-photo-placeholder { height: 400px; object-position: top; }
.doctor-info { padding: 1.25rem 1rem 1.5rem; }
.doctor-name { font-size: 1rem; font-weight: 700; color: var(--sw-dark); margin-bottom: .25rem; }
.doctor-dept { font-size: .8rem; color: var(--sw-blue); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.doctor-qual { font-size: .8rem; color: var(--sw-gray-600); margin-bottom: .75rem; }
.doctor-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .2rem .6rem; border-radius: 99px; background: var(--sw-blue-light); color: var(--sw-blue); margin-bottom: .75rem; }

/* ---- Speciality Cards ---- */
.specialty-card {
  background: #fff; border-radius: var(--radius-md); padding: 2rem 1.5rem;
  border: 1px solid var(--sw-gray-200); text-align: center;
  transition: var(--transition); cursor: pointer; text-decoration: none; color: var(--sw-dark);
  display: block; box-shadow: var(--shadow-sm);
}
.specialty-card:hover { border-color: var(--sw-blue); box-shadow: var(--shadow-md); color: var(--sw-dark); transform: translateY(-2px); }
.specialty-icon { font-size: 2.5rem; color: var(--sw-blue); margin-bottom: 1rem; display: block; }
.specialty-name { font-size: .95rem; font-weight: 700; margin: 0; }

/* ---- Facility Cards ---- */
.facility-card {
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--sw-gray-200); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.facility-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.facility-img { width: 100%; height: 200px; object-fit: cover; background: var(--sw-blue-light); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--sw-blue); }
.facility-body { padding: 1.25rem; }
.facility-name { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }

/* ---- Testimonials ---- */
.testimonial-card {
  background: #fff; border-radius: var(--radius-md); padding: 2rem;
  border: 1px solid var(--sw-gray-200); box-shadow: var(--shadow-sm); height: 100%;
}
.testimonial-stars { color: #FFC107; font-size: .9rem; margin-bottom .75rem; }
.testimonial-text { font-size: .9rem; color: var(--sw-gray-600); line-height: 1.7; margin-bottom: 1rem; font-style: italic; }
.testimonial-name { font-weight: 700; font-size: .9rem; margin-bottom: 0; }
.testimonial-dept { font-size: .8rem; color: var(--sw-blue); }

/* ---- Outreach ---- */
.outreach-card {
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--sw-gray-200); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.outreach-card:hover { box-shadow: var(--shadow-md); }
.outreach-card-body { padding: 1.5rem; }
.outreach-date { font-size: .78rem; color: var(--sw-blue); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.outreach-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }

/* ---- Blog ---- */
.blog-card {
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--sw-gray-200); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card-img { width: 100%; height: 200px; object-fit: cover; background: var(--sw-blue-light); }
.blog-card-body { padding: 1.5rem; }
.blog-card-date { font-size: .78rem; color: var(--sw-gray-600); margin-bottom: .5rem; }
.blog-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.blog-card-excerpt { font-size: .875rem; color: var(--sw-gray-600); }

/* ---- Donate & Volunteer CTA Section ---- */
.cta-section {
  background: linear-gradient(135deg, var(--sw-blue-dark), var(--sw-dark));
  padding: 5rem 0; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='20' fill='rgba(255,255,255,.03)'/%3E%3C/svg%3E") repeat;
}
.cta-section .container { position: relative; z-index: 2; }

/* ---- About Section ---- */
.about-image-wrap { position: relative; }
.about-image { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-badge {
  position: absolute; bottom: -1rem; right: -1rem;
  background: var(--sw-blue); color: #fff; border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem; text-align: center; box-shadow: var(--shadow-md);
}
.about-badge .number { font-size: 2rem; font-weight: 800; line-height: 1; }
.about-badge .label { font-size: .75rem; opacity: .85; }

/* ---- Forms ---- */
.sw-form { background: #fff; border-radius: var(--radius-md); padding: 2.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--sw-gray-200); }
.form-label { font-weight: 500; font-size: .875rem; color: var(--sw-gray-800); }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--sw-gray-400); font-size: .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--sw-blue); box-shadow: 0 0 0 .2rem rgba(30,81,164,.15); }

/* ---- Page Hero ---- */
.page-hero {
  background: linear-gradient(135deg, var(--sw-dark), #1a3a6b);
  padding: 3.5rem 0 2.5rem;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/img/hero-bg.jpg') center/cover no-repeat; opacity: .1;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: .5rem; }
.page-hero .breadcrumb { background: none; padding: 0; margin: 0; }
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item a { color: rgba(255,255,255,.65); font-size: .875rem; }
.page-hero .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* ---- Pagination ---- */
.pagination { justify-content: center; gap: .25rem; }
.page-link { border-radius: var(--radius-sm) !important; border-color: var(--sw-gray-200); color: var(--sw-blue); font-size: .875rem; }
.page-item.active .page-link { background: var(--sw-blue); border-color: var(--sw-blue); }

/* ---- Footer ---- */
.site-footer { background: var(--sw-dark); }
.footer-top { padding: 4rem 0 2rem; }
.footer-heading { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); margin-bottom: 1rem; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .875rem; transition: var(--transition); }
.footer-links a:hover { color: #fff; padding-left: .25rem; }
.footer-about { color: rgba(255,255,255,.55); }
.site-footer .text-muted { color: rgba(255,255,255,.65) !important; }
.site-footer .footer-bottom .text-muted { color: rgba(255,255,255,.55) !important; }
.site-footer a.text-muted:hover { color: #fff !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.25rem 0; }
.social-icon { color: rgba(255,255,255,.6); font-size: 1.25rem; transition: var(--transition); }
.social-icon:hover { color: var(--sw-blue); }

/* ---- Leadership ---- */
.leadership-card {
  text-align: center; background: #fff; border-radius: var(--radius-md);
  padding: 2rem 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--sw-gray-200);
}
.leadership-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid var(--sw-blue-light); margin: 0 auto 1rem; background: var(--sw-blue-light); display: flex; align-items: center; justify-content: center; }
.leadership-name { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.leadership-designation { font-size: .8rem; color: var(--sw-blue); font-weight: 500; margin-bottom: .75rem; }

/* ---- Donation Categories ---- */
.donation-category {
  border: 2px solid var(--sw-gray-200); border-radius: var(--radius-md);
  padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  transition: var(--transition); background: #fff;
}
.donation-category:hover, .donation-category.selected { border-color: var(--sw-blue); background: var(--sw-blue-light); }
.donation-category .di { font-size: 1.75rem; color: var(--sw-blue); margin-bottom: .5rem; display: block; }
.donation-category h6 { font-size: .875rem; font-weight: 700; margin: 0; }

/* ---- Utility ---- */
.text-blue { color: var(--sw-blue) !important; }
.text-green { color: var(--sw-green) !important; }
.bg-blue { background-color: var(--sw-blue) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }
.btn-primary { background: var(--sw-blue); border-color: var(--sw-blue); font-weight: 600; }
.btn-primary:hover { background: var(--sw-blue-dark); border-color: var(--sw-blue-dark); }
.btn-outline-primary { border-color: var(--sw-blue); color: var(--sw-blue); font-weight: 600; }
.btn-success { background: var(--sw-green); border-color: var(--sw-green); font-weight: 600; }

/* Gallery */
.gallery-item { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* Skip to content */
.skip-link { position: absolute; top: -100%; left: 0; background: var(--sw-blue); color: #fff; padding: .5rem 1rem; z-index: 9999; }
.skip-link:focus { top: 0; }

/* Responsive */
@media (max-width: 767px) {
  .section-pad { padding: 3rem 0; }
  .hero-slide { min-height: 380px; padding: 3rem 0; }
  .hero-title { font-size: 1.75rem; }
  .sw-form { padding: 1.5rem; }
  .about-badge { display: none; }
}
@media (max-width: 575px) {
  .ribbon-left .ribbon-sep { display: none; }
  .top-ribbon { font-size: .72rem; }
}

/* ---- Logo Image ---- */
.navbar-logo { height: 46px; width: auto; object-fit: contain; }
.footer-logo-img { height: 44px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
/* Brand group: hospital logo + separator + Satsang Foundation logo */
.brand-group { display: inline-flex; align-items: center; gap: .85rem; padding: .15rem 0; margin-right: .5rem; }
.brand-sep { width: 1px; align-self: stretch; min-height: 40px; background: #000; }
.navbar-logo-tsf { height: 46px; }
@media (max-width: 576px) {
  .navbar-logo { height: 38px; }
  .navbar-logo-tsf { height: 38px; }
  .brand-group { gap: .6rem; margin-right: 0; }
  .brand-sep { min-height: 32px; }
}

/* ---- Page hero subtitle ---- */
.page-hero-sub { color: rgba(255,255,255,.82); font-size: clamp(.95rem, 1.6vw, 1.1rem); max-width: 640px; }

/* ---- Our Journey Timeline ---- */
.journey-timeline { position: relative; max-width: 940px; margin: 0 auto; }
.journey-timeline::before {
  content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 50%;
  width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--sw-blue), var(--sw-blue-light));
  border-radius: 99px;
}
.journey-item { position: relative; width: 50%; padding: 0 3rem 2.75rem 0; }
.journey-item:nth-child(even) { margin-left: 50%; padding: 0 0 2.75rem 3rem; }
.journey-year {
  position: absolute; top: 0; z-index: 2;
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F04F23, #d43f1c);
  color: #fff; font-family: var(--font-primary); font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 16px rgba(240,79,35,.4); border: 4px solid #fff;
}
.journey-item:nth-child(odd)  .journey-year { right: -36px; }
.journey-item:nth-child(even) .journey-year { left: -36px; }
.journey-card {
  background: #fff; border: 1px solid var(--sw-gray-200); border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm);
  transition: var(--transition); position: relative;
}
.journey-card::before {
  content: ""; position: absolute; top: 26px; width: 0; height: 0;
  border: 9px solid transparent;
}
.journey-item:nth-child(odd)  .journey-card::before { right: -18px; border-left-color: #fff; }
.journey-item:nth-child(even) .journey-card::before { left: -18px; border-right-color: #fff; }
.journey-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.journey-title { color: var(--sw-dark); font-weight: 700; margin-bottom: .5rem; }
.journey-details { color: var(--sw-gray-600); font-size: .95rem; margin: 0; }
.journey-card-body { display: flex; gap: 1rem; align-items: flex-start; }
.journey-thumb { flex: 0 0 auto; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--sw-gray-200); }

@media (max-width: 767px) {
  .journey-timeline::before { left: 24px; }
  .journey-item, .journey-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 2rem 4.75rem; }
  .journey-item:nth-child(odd)  .journey-year,
  .journey-item:nth-child(even) .journey-year { left: -12px; right: auto; width: 60px; height: 60px; font-size: .9rem; }
  .journey-item:nth-child(odd)  .journey-card::before,
  .journey-item:nth-child(even) .journey-card::before { left: -18px; right: auto; border-right-color: #fff; border-left-color: transparent; }
}

/* ===== Outreach auto-scrolling gallery carousel ===== */
.outreach-carousel{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    cursor:grab;outline:none;
    scroll-behavior:auto;
}
.outreach-carousel::-webkit-scrollbar{display:none;height:0;}
.outreach-carousel:active{cursor:grabbing;}
.outreach-carousel:focus-visible{box-shadow:inset 0 0 0 3px rgba(30,81,164,.35);border-radius:8px;}
.outreach-carousel-track{display:flex;gap:1rem;padding:.5rem 1rem;}
.outreach-carousel-item{flex:0 0 auto;width:clamp(280px,30vw,460px);margin:0;}
.outreach-carousel-media{
    position:relative;aspect-ratio:16/9;
    border-radius:14px;overflow:hidden;background:#eef1f4;
    box-shadow:0 8px 22px rgba(0,0,0,.09);
}
.outreach-carousel-media img{width:100%;height:100%;object-fit:cover;display:block;}
.outreach-carousel-caption{margin-top:.6rem;font-size:.9rem;color:#5a6470;text-align:center;line-height:1.35;}
@media (max-width:992px){.outreach-carousel-item{width:clamp(240px,45vw,400px);}}
@media (max-width:576px){.outreach-carousel-item{width:85vw;}}
@media (prefers-reduced-motion:reduce){.outreach-carousel{scroll-behavior:auto;}}

/* ---- Donate page: payment method selector ---- */
.payment-methods{display:flex;flex-direction:column;gap:12px;}
.payment-option{
    display:flex;align-items:center;gap:14px;
    border:1px solid #E2E8F0;border-radius:14px;
    padding:14px 18px;margin:0;cursor:pointer;background:#fff;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.payment-option:hover{border-color:#CBD5E1;}
.payment-option input{position:absolute;opacity:0;pointer-events:none;}
.payment-option .pm-icon{
    width:46px;height:46px;border-radius:12px;flex-shrink:0;
    background:#FBF0E7;color:#A9541F;
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.payment-option .pm-text{display:flex;flex-direction:column;line-height:1.35;}
.payment-option .pm-text strong{font-size:1rem;color:#111827;}
.payment-option .pm-text small{color:#6B7280;font-size:.85rem;}
.payment-option.selected{border-color:#C2703D;box-shadow:0 0 0 1px #C2703D;}
.payment-option:focus-within{outline:2px solid rgba(194,112,61,.35);outline-offset:2px;}