:root{ --saffron:#c76b12; --sandstone:#d8b58a; --ivory:#f8f3e8; --maroon:#5b1f1f; --gold:#c9a227; --charcoal:#121212; --text:#2b2b2b; } body{ font-family:'Inter',sans-serif; background:var(--ivory); color:var(--text); scroll-behavior:smooth; } h1,h2,h3,h4,h5{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--maroon); } .section-title{ position:relative; margin-bottom:1rem; } .section-title::after{ content:''; width:90px; height:3px; background:linear-gradient(90deg,var(--gold),var(--saffron)); display:block; margin-top:10px; } .btn-heritage{ background:linear-gradient(135deg,var(--saffron),var(--gold)); border:none; color:#fff; padding:.8rem 1.6rem; border-radius:50px; font-weight:600; transition:.3s ease; } .btn-heritage:hover{ transform:translateY(-2px); color:#fff; } .navbar{ transition:.3s ease; } .navbar.scrolled{ background:rgba(255,248,240,.96)!important; box-shadow:0 5px 20px rgba(0,0,0,.08); } .hero{ min-height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; background: linear-gradient(rgba(10,10,10,.55),rgba(10,10,10,.55)), url('../images/ram-mandir.jpeg') center/cover no-repeat; } .hero::before{ content:''; position:absolute; inset:0; background:url('../images/temple-silhouette.png') bottom center/contain no-repeat; opacity:.15; } .hero-content{ position:relative; z-index:2; } .hero h1{ color:#fff; font-size:clamp(3rem,6vw,5rem); line-height:1; } .hero h2{ color:#f7d9a4; font-size:clamp(1.5rem,3vw,2.2rem); } .hero p{ color:#f2f2f2; font-size:1.1rem; max-width:700px; } .portrait-frame{ border:8px solid rgba(255,255,255,.35); border-radius:20px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.35); } .heritage-card{ background:#fff; border-radius:20px; padding:2rem; box-shadow:0 10px 30px rgba(0,0,0,.06); border:1px solid rgba(201,162,39,.18); transition:.3s ease; } .heritage-card:hover{ transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,.1); } .timeline{ border-left:3px solid var(--gold); padding-left:1.5rem; } .timeline-item{ position:relative; margin-bottom:2rem; } .timeline-item::before{ content:''; position:absolute; left:-1.95rem; top:.3rem; width:16px; height:16px; background:var(--saffron); border:3px solid #fff; border-radius:50%; } .quote-box{ background:linear-gradient(135deg,#fff8ef,#fff); border-left:5px solid var(--gold); padding:1.5rem; border-radius:12px; } .footer{ background:#2a1515; color:#f4e7cf; } .footer a{ color:#f4e7cf; text-decoration:none; } .footer a:hover{ color:#fff; } .dark-mode{ background:var(--charcoal); color:#e5e5e5; } .dark-mode .heritage-card{ background:#1f1f1f; color:#eee; } .dark-mode .navbar.scrolled{ background:rgba(18,18,18,.96)!important; } .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4{ color:#f5d08a; } @media (max-width:768px){ .hero{ text-align:center; padding-top:120px; padding-bottom:80px; } }