:root{
  --brand:#1E3A8A;
  --brand-bg:#f1f5f9; /* slate-100 - matching admin */
  --brand-white:#ffffff;
  --brand-surface:#ffffff;
  --brand-muted:#64748b; /* slate-500 */
  --brand-primary:#1E3A8A;
  --brand-primary-ghost:rgba(30,58,138,0.08);
  --brand-card:#ffffff;
  --brand-border:#e5e7eb;
}
body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:#0f172a;
  background: var(--brand-bg);
}
.text-primary{ color: var(--brand-primary)!important; }
.bg-brand{ background: var(--brand-primary); }
.btn-primary{
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover{ 
  background-color: #1e40af;
  border-color: #1e40af;
}
.hero{
  color: var(--brand-white);
}
.hero-modern{
  position: relative;
  background: linear-gradient(120deg, #36096d 0%, #37d5d6 100%);
  overflow: hidden;
  padding: 5rem 0 6rem;
}
.hero-modern .hero-title{
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
}
.hero-modern .hero-eyebrow{
  letter-spacing: .25rem;
  font-size: .85rem;
  color: rgba(255,255,255,0.8);
}
.hero-modern .hero-subtitle{
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  max-width: 560px;
  line-height: 1.7;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 45%), radial-gradient(circle at 80% 0, rgba(255,255,255,0.2), transparent 40%), radial-gradient(circle at 50% 80%, rgba(0,0,0,0.2), transparent 45%);
  mix-blend-mode: screen;
}
.hero-visual{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.4);
  max-width: 320px;
  margin-left: auto;
}
.hero-visual:before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45), transparent 55%);
  mix-blend-mode: screen;
}
.hero-image{
  width:100%;
  padding-top:100%;
  background-size: cover;
  background-position: center;
  filter: saturate(1.1);
}
.hero-visual-badge{
  position:absolute;
  top:20px;
  left:20px;
  background:rgba(15,23,42,.85);
  color:#fff;
  padding:.6rem 1.2rem;
  border-radius:999px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
}
.glass{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--brand-border);
}
.card-hover:hover{ 
  transform: translateY(-2px); 
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1); 
  border-color: var(--brand-border);
}
.card{
  background: var(--brand-card);
  border-color: var(--brand-border);
  color: #0f172a;
}
.nav-link{ 
  font-weight:500; 
  transition: all 0.3s ease;
  position: relative;
}
.nav-link:hover{
  background-color: var(--brand-primary-ghost);
  color: var(--brand-primary) !important;
  transform: translateY(-1px);
}

/* Navbar Styling */
.navbar{
  background: var(--brand-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}
.navbar.scrolled{
  background: var(--brand-surface) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  opacity: 1 !important;
}
.navbar-light{
  background: var(--brand-surface) !important;
  opacity: 1 !important;
}
.navbar.bg-white{
  background: var(--brand-surface) !important;
  opacity: 1 !important;
}
.navbar-brand{
  transition: all 0.3s ease;
}
.navbar-brand:hover{
  transform: scale(1.05);
}
.navbar-brand .bg-primary{
  transition: all 0.3s ease;
}
.navbar-brand:hover .bg-primary{
  background-color: var(--brand-primary) !important;
  transform: rotate(5deg);
}
.navbar-brand:hover .bg-primary i{
  color: white !important;
}
.btn-primary{
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
  background-color: #1e40af;
  border-color: #1e40af;
}
.btn-primary::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.btn-primary:hover::before{
  left: 100%;
}
.section-title{ font-weight:700; letter-spacing:.3px; }
.footer a:hover{ color: var(--brand)!important; }

/* Feature Cards */
.feature-card{
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05) !important;
}
.feature-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
  border-color: var(--brand-primary) !important;
}
.feature-card .icon-box{
  transition: all 0.3s ease;
}
.feature-card:hover .icon-box{
  transform: scale(1.1);
  background-color: var(--brand-primary) !important;
}
.feature-card:hover .icon-box i{
  color: white !important;
}

/* Additional Admin Panel Matching Styles */
.bg-primary{
  background-color: var(--brand-primary) !important;
}
.bg-primary-ghost{
  background-color: var(--brand-primary-ghost) !important;
}
.text-muted{
  color: var(--brand-muted) !important;
}
.border-primary{
  border-color: var(--brand-primary) !important;
}
.shadow-sm{
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.shadow{
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}
.shadow-lg{
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Platform Cards */
.platform-card{
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05) !important;
}
.platform-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
  border-color: var(--brand-primary) !important;
}
.platform-card .bg-primary,
.platform-card .bg-success,
.platform-card .bg-warning,
.platform-card .bg-info,
.platform-card .bg-danger{
  transition: all 0.3s ease;
}
.platform-card:hover .bg-primary{
  background-color: var(--brand-primary) !important;
}
.platform-card:hover .bg-primary i{
  color: white !important;
}
.platform-card:hover .bg-success{
  background-color: #059669 !important;
}
.platform-card:hover .bg-success i{
  color: white !important;
}
.platform-card:hover .bg-warning{
  background-color: #d97706 !important;
}
.platform-card:hover .bg-warning i{
  color: white !important;
}
.platform-card:hover .bg-info{
  background-color: #0891b2 !important;
}
.platform-card:hover .bg-info i{
  color: white !important;
}
.platform-card:hover .bg-danger{
  background-color: #dc2626 !important;
}
.platform-card:hover .bg-danger i{
  color: white !important;
}

/* Footer Styling */
footer a:hover{
  color: var(--brand-primary) !important;
  transition: color 0.3s ease;
}
footer .input-group .form-control{
  border-color: #495057;
  background-color: rgba(255,255,255,0.1);
  color: white;
}
footer .input-group .form-control::placeholder{
  color: rgba(255,255,255,0.6);
}
footer .input-group .form-control:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
  background-color: rgba(255,255,255,0.15);
}
footer .btn-primary{
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
footer .btn-primary:hover{
  background-color: #1e40af;
  border-color: #1e40af;
}

/* About Page Text Overrides */
.about-hero h1,
.about-hero .lead,
.about-hero span{
  color: #ffffff !important;
}
.about-hero{
  background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%) !important;
  min-height: auto;
  position: relative;
}

/* Minimum viewport height utilities */
.min-vh-75 {
  min-height: 75vh !important;
}

/* Call to Action Section */
.cta-section h2,
.cta-section .lead{
  color: #ffffff !important;
}
.cta-section{
  background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 100%) !important;
}

/* About Page Animations */
@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.about-hero .position-relative {
  animation: none;
}

.about-hero .position-relative > div {
  animation: rotate 20s linear infinite;
}

.about-hero .position-relative > div:nth-child(2) {
  animation: rotate 15s linear infinite reverse;
}

/* Pulse Animation for Founder Image */
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
}

/* Map Styling */
.text-purple { color: #8b5cf6 !important; }
.bg-purple { background-color: #8b5cf6 !important; }

.zone-marker {
  cursor: pointer;
  transition: all 0.3s ease;
}

.zone-marker:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}

.beliefs-card, .declarations-card{
  border-radius:24px;
  background:#fff;
}
.beliefs-list, .declarations-list{
  list-style:disc;
  padding-left:1.2rem;
  color:#475569;
  line-height:1.7;
}
.beliefs-list li:not(:last-child),
.declarations-list li:not(:last-child){
  margin-bottom:.6rem;
}

/* Map Container */
.map-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Hero image mosaic */
.hero-image-mosaic{
  max-width: 360px;
  min-height: 360px;
}
.hero-image-mosaic .mosaic-card{
  position: absolute;
  border-radius: 24px;
}
.hero-image-mosaic .mosaic-card img{
  display: block;
  width: 100%;
  height: 100%;
}
.hero-image-mosaic .main{
  width: 240px;
  height: 320px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.hero-image-mosaic .secondary{
  width: 150px;
  height: 190px;
  top: -20px;
  right: -20px;
}
.hero-image-mosaic .tertiary{
  width: 140px;
  height: 180px;
  bottom: -10px;
  left: -10px;
}
.hero-image-mosaic .mosaic-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(17,24,39,0.8);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
}
.hero-image-mosaic .mosaic-stat{
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: rgba(15,23,42,0.9);
  color: #fff;
  padding: 0.9rem 1.2rem;
  border-radius: 16px;
}

/* About photo grid */
.about-photo-grid{
  position: relative;
  min-height: 300px;
}
.about-photo-grid .photo-large{
  width: 75%;
  height: 260px;
}
.about-photo-grid .photo-small{
  position: absolute;
  width: 140px;
  height: 160px;
}
.about-photo-grid .photo-small.top{
  top: -20px;
  right: 0;
}
.about-photo-grid .photo-small.bottom{
  bottom: -15px;
  left: 10px;
}
.about-photo-card{
  position:absolute;
  bottom:-5px;
  right:0;
  background:#fff;
  padding:1rem 1.2rem;
  border-radius:16px;
  max-width:220px;
}
.about-card{
  display:flex;
  gap:1rem;
  padding:1.2rem;
  border-radius:18px;
  background:#fff;
  margin-bottom:1rem;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}
.about-card .icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(30,58,138,0.1);
  color:var(--brand-primary);
  font-size:1.1rem;
}
.about-card.vision .icon{
  background:rgba(5,150,105,0.1);
  color:#059669;
}
.about-card h5{
  margin-bottom:.25rem;
  font-weight:600;
  color:#0f172a;
}
.about-stat{
  background:#fff;
  border-radius:20px;
  padding:1.2rem 1.5rem;
}
.about-stat .value{
  font-size:1.8rem;
  font-weight:700;
  color:#1e40af;
}

/* About Hero Stat Cards Hover Effect */
.about-hero .rounded-4:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
}