/* ==========================================================
   Mandir Theme – श्री राणी सती दादीजी मंदिर
   Add-on stylesheet. Remove its <link> to go back to the old look.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi&family=Hind:wght@400;500;600&display=swap');

:root {
	--m-saffron: #e8740c;
	--m-saffron-lt: #ff9f1c;
	--m-maroon: #7a1f1f;
	--m-maroon-dk: #4a0f0f;
	--m-gold: #d4a017;
	--m-gold-lt: #f6d77a;
	--m-cream: #fff8ec;
	--m-ink: #3b1a0a;
	/* faint mandala pattern */
	--m-mandala: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d4a017' stroke-opacity='0.09' stroke-width='1'%3E%3Ccircle cx='60' cy='60' r='18'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Cpath d='M60 30 Q70 45 60 60 Q50 45 60 30Z M60 90 Q70 75 60 60 Q50 75 60 90Z M30 60 Q45 50 60 60 Q45 70 30 60Z M90 60 Q75 50 60 60 Q75 70 90 60Z'/%3E%3Cpath d='M39 39 Q54 44 60 60 Q44 54 39 39Z M81 39 Q76 54 60 60 Q66 44 81 39Z M39 81 Q44 66 60 60 Q54 76 39 81Z M81 81 Q66 76 60 60 Q76 66 81 81Z'/%3E%3C/g%3E%3C/svg%3E");
	/* marigold toran (scalloped garland) */
	--m-toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Cpath d='M0 0 Q10 16 20 0 Q30 16 40 0Z' fill='%23ffb627'/%3E%3Ccircle cx='10' cy='9' r='3.2' fill='%23e8740c'/%3E%3Ccircle cx='30' cy='9' r='3.2' fill='%23e8740c'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body {
	background-color: var(--m-cream);
	color: var(--m-ink);
}

h1, h2, h3,
.title-s-r, .fw-bold.title-s-r {
	font-family: 'Tiro Devanagari Hindi', 'Hind', serif;
	letter-spacing: 0.2px;
}

body, p, h5, h6, li, td, th, .btn-r, .nav-link {
	font-family: 'Hind', 'Poppins', sans-serif;
}

::selection {
	background: var(--m-gold-lt);
	color: var(--m-maroon-dk);
}

/* ---------- Top bar + navbar ---------- */
#top.bg-theme2 {
	background: linear-gradient(90deg, var(--m-maroon-dk), var(--m-maroon), var(--m-maroon-dk)) !important;
	border-bottom: 1px solid rgba(212, 160, 23, .5);
}

#top .a_tag {
	color: var(--m-gold-lt) !important;
	letter-spacing: .5px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

#top .a_tag::before,
#top .a_tag::after {
	content: '✦';
	color: var(--m-gold);
	margin: 0 10px;
	font-size: 11px;
}

#header .bg-theme {
	background: linear-gradient(90deg, #d9580a, var(--m-saffron) 35%, #f59a2b 65%, #d9580a) !important;
	position: relative;
	box-shadow: 0 4px 14px rgba(122, 31, 31, .25);
}

/* hanging toran below the navbar */
#header .bg-theme::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	height: 16px;
	background: var(--m-toran) repeat-x;
	background-size: 40px 16px;
	pointer-events: none;
	z-index: 5;
}

#header .nav-link {
	color: #fff !important;
	font-weight: 500;
	position: relative;
}

#header .nav-link::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 2px;
	background: var(--m-gold-lt);
	transition: all .3s ease;
	transform: translateX(-50%);
}

#header .nav-link:hover::after {
	width: 60%;
}

#header .nav-link:hover {
	color: var(--m-gold-lt) !important;
}

.logo-img-r img,
img.logo-img-r {
	border-radius: 50%;
	border: 2px solid var(--m-gold-lt);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 14px rgba(255, 215, 120, .6);
}

#header .title-r {
	font-family: 'Tiro Devanagari Hindi', serif;
	text-shadow: 0 1px 2px rgba(74, 15, 15, .5);
}

/* ---------- Hero ---------- */
.center_home .bg_back {
	background: linear-gradient(180deg, rgba(74, 15, 15, .15) 0%, rgba(74, 15, 15, .35) 55%, rgba(30, 5, 5, .7) 100%) !important;
}

.center_home .carousel-caption h1 {
	color: var(--m-gold-lt) !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .7), 0 0 24px rgba(255, 170, 60, .45);
	text-transform: none !important;
	line-height: 1.35;
}

.center_home .carousel-caption p {
	font-size: 1.15rem;
	color: #fff5e1 !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.button_3 {
	background: linear-gradient(135deg, var(--m-saffron), var(--m-maroon)) !important;
	border: 1px solid var(--m-gold-lt) !important;
	border-radius: 40px;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(232, 116, 12, .45);
}

.button_3:hover {
	background: linear-gradient(135deg, var(--m-gold-lt), var(--m-saffron)) !important;
	color: var(--m-maroon-dk) !important;
}

/* falling flower petals (added by mandir-theme.js) */
.m-petals {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
}

.m-petal {
	position: absolute;
	top: -40px;
	font-size: 20px;
	opacity: .85;
	animation: m-fall linear infinite;
}

@keyframes m-fall {
	0% { transform: translateY(-40px) rotate(0deg); }
	100% { transform: translateY(110vh) rotate(360deg); }
}

/* ---------- Section headings: ornamental divider ---------- */
.underline-r,
.underline-s-r,
.section-line-his,
.map-section .underline {
	width: 220px !important;
	height: 22px !important;
	margin: 8px auto 18px !important;
	background:
		linear-gradient(90deg, transparent, var(--m-gold)) left center / 42% 2px no-repeat,
		linear-gradient(90deg, var(--m-gold), transparent) right center / 42% 2px no-repeat !important;
	position: relative;
}

.underline-r::after,
.underline-s-r::after,
.section-line-his::after,
.map-section .underline::after {
	content: 'ॐ';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -52%);
	font-size: 20px;
	line-height: 1;
	color: var(--m-saffron);
	text-shadow: 0 0 10px rgba(255, 170, 60, .6);
}

/* left-aligned history block keeps its divider on the left */
.watch_1r .section-line-his {
	margin-left: 0 !important;
}

/* ---------- History / about block ---------- */
#watch {
	background: var(--m-cream) var(--m-mandala) !important;
}

#watch .col-md-8,
#watch .watch_1r {
	background-color: #fffaf0 !important;
}

#watch .watch_1r {
	border: 1px solid rgba(212, 160, 23, .45);
	border-left: 5px solid var(--m-saffron);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(122, 31, 31, .08);
}

#watch .watch_1r h1 {
	color: var(--m-maroon) !important;
}

#watch .watch_1r h6 {
	line-height: 1.75;
	padding: 3px 0;
}

.btn-danger,
a.btn.btn-danger {
	background: linear-gradient(135deg, var(--m-saffron), var(--m-maroon));
	border: 1px solid var(--m-gold);
	border-radius: 30px;
	padding-left: 22px;
	padding-right: 22px;
}

/* ---------- Image carousels & event cards ---------- */
.card1 img,
.card-r,
.event-card-s-r {
	border-radius: 18px;
}

.card-r,
.event-card-s-r,
.card1 {
	border: 2px solid rgba(212, 160, 23, .55);
	box-shadow: 0 8px 22px rgba(122, 31, 31, .12);
	transition: transform .35s ease, box-shadow .35s ease;
	overflow: hidden;
}

.card-r:hover,
.event-card-s-r:hover,
.card1:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(232, 116, 12, .3);
}

.card-r img,
.card1 img,
.event-card-s-r img {
	transition: transform .6s ease;
}

.card-r:hover img,
.card1:hover img,
.event-card-s-r:hover img {
	transform: scale(1.06);
}

.card-text-r {
	background: linear-gradient(180deg, #fff, #fff4e0);
	color: var(--m-maroon);
	font-weight: 600;
	border-top: 2px solid var(--m-gold-lt);
}

.event-card-s-r {
	background: linear-gradient(180deg, #fff, #fff1dc) !important;
}

.event-title-s-r {
	color: var(--m-maroon) !important;
}

.carousel-btn,
.nav-btn-r {
	background: rgba(122, 31, 31, .8) !important;
	color: var(--m-gold-lt) !important;
	border: 1px solid var(--m-gold) !important;
	border-radius: 50% !important;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-btn:hover,
.nav-btn-r:hover {
	background: var(--m-saffron) !important;
	color: #fff !important;
}

/* gallery tabs */
.btn-r {
	border: 1px solid var(--m-gold) !important;
	background: #fff8ea !important;
	color: var(--m-maroon) !important;
	font-weight: 500;
	transition: all .25s ease;
}

.btn-r:hover {
	background: #ffe7c2 !important;
}

.btn-r.active-r {
	background: linear-gradient(135deg, var(--m-saffron), var(--m-maroon)) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(232, 116, 12, .35);
}

/* ---------- Aarti timing table ---------- */
.table-responsive {
	border-radius: 16px;
	border: 2px solid var(--m-gold);
	box-shadow: 0 10px 26px rgba(122, 31, 31, .1);
}

.table-responsive .table {
	margin-bottom: 0;
}

.table-responsive thead th {
	background: linear-gradient(135deg, var(--m-maroon), #a1361a) !important;
	color: var(--m-gold-lt) !important;
	border-color: rgba(212, 160, 23, .4) !important;
	font-weight: 600;
	vertical-align: middle;
}

.table-responsive tbody td {
	background: #fffaf0 !important;
	border-color: rgba(212, 160, 23, .25) !important;
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.table-responsive tbody tr:nth-child(even) td {
	background: #fff1d6 !important;
}

.table-responsive tbody tr:hover td {
	background: #ffe2b0 !important;
}

.table-responsive tbody td:first-child {
	font-weight: 600;
	color: var(--m-maroon);
}

/* ---------- Bhajan section ---------- */
#bhajan > .container-xl,
#bhajan {
	position: relative;
}

#bhajan .row {
	background-image: var(--m-mandala);
}

/* ---------- Donation ---------- */
.donation-section {
	background:
		var(--m-mandala),
		linear-gradient(135deg, #f08a12, var(--m-saffron) 45%, #c2410c) !important;
	border-top: 4px solid var(--m-gold);
	border-bottom: 4px solid var(--m-gold);
}

.donation-content h2 {
	color: #fff !important;
	text-shadow: 0 2px 6px rgba(74, 15, 15, .35);
}

.donation-image img {
	border-radius: 20px;
	border: 3px solid var(--m-gold-lt);
	box-shadow: 0 12px 30px rgba(74, 15, 15, .35);
}

/* ---------- Map ---------- */
.map-section h2 {
	font-family: 'Tiro Devanagari Hindi', serif;
	color: var(--m-maroon);
}

.map-container iframe {
	border-radius: 18px !important;
	border: 3px solid var(--m-gold) !important;
	box-shadow: 0 10px 26px rgba(122, 31, 31, .15);
}

/* ---------- Enquiry box ---------- */
#subs .bg-white,
#subs .subs_1 {
	border-top: 4px solid var(--m-saffron);
	border-radius: 14px;
}

#subs .btn,
#subs a.button {
	border-radius: 30px;
}

/* ---------- Footer: deep maroon instead of navy ---------- */
.bg_blue,
#footer.bg_blue,
#footer_b.bg_blue {
	background-color: var(--m-maroon-dk) !important;
}

#footer {
	background-image: var(--m-mandala) !important;
	border-top: 4px solid var(--m-gold);
	position: relative;
}

#footer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 16px;
	background: var(--m-toran) repeat-x;
	background-size: 40px 16px;
}

#footer h4 {
	color: var(--m-gold-lt) !important;
	font-family: 'Tiro Devanagari Hindi', serif;
}

#footer a:hover,
#footer h6 a:hover {
	color: var(--m-gold-lt) !important;
}

#footer_b {
	border-top: 1px solid rgba(212, 160, 23, .35);
}

#footer_b a[class*="bg"],
#footer_b .fa-facebook-f,
#footer_b .fa-youtube {
	color: var(--m-gold-lt);
}

#footer_b ul li a {
	background: var(--m-maroon) !important;
	border: 1px solid var(--m-gold);
	transition: background .25s ease;
}

#footer_b ul li a:hover {
	background: var(--m-saffron) !important;
}

/* ---------- Scroll reveal (classes added by mandir-theme.js) ---------- */
.m-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s ease;
}

.m-reveal.m-in {
	opacity: 1;
	transform: none;
}

/* ---------- Floating diya "back to top" ---------- */
.m-top {
	position: fixed;
	right: 18px;
	bottom: 90px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--m-gold);
	background: radial-gradient(circle at 50% 40%, #fff3d0, #ffd27a);
	box-shadow: 0 0 16px rgba(255, 170, 60, .7);
	font-size: 22px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
	animation: m-glow 2.2s ease-in-out infinite;
}

.m-top.m-show {
	opacity: 1;
	visibility: visible;
}

@keyframes m-glow {
	0%, 100% { box-shadow: 0 0 10px rgba(255, 170, 60, .5); }
	50% { box-shadow: 0 0 22px rgba(255, 170, 60, .95); }
}

/* ---------- Polish (2 Nov 2026) ---------- */

/* donation photo: soft blend at the edge instead of a heavy orange wash */
.donation-image::after {
	background: linear-gradient(to right, rgba(232, 116, 12, .55), rgba(232, 116, 12, 0) 35%) !important;
}

/* bank details card */
.m-bank {
	background: rgba(255, 248, 236, .96);
	border: 2px solid var(--m-gold);
	border-radius: 16px;
	padding: 6px 18px;
	margin: 18px 0 26px;
	max-width: 560px;
	box-shadow: 0 10px 24px rgba(74, 15, 15, .25);
	text-align: left;
}
.m-bank-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 12px 0;
	border-bottom: 1px dashed rgba(212, 160, 23, .55);
}
.m-bank-row:last-child { border-bottom: 0; }
.m-bank-label {
	flex: 0 0 170px;
	color: var(--m-maroon);
	font-weight: 600;
	font-size: 15px;
}
.m-bank-val {
	flex: 1 1 auto;
	color: var(--m-ink);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .5px;
	word-break: break-word;
}
.m-copy {
	border: 1px solid var(--m-gold);
	background: linear-gradient(135deg, var(--m-saffron), var(--m-maroon));
	color: #fff;
	border-radius: 20px;
	padding: 4px 14px;
	font-size: 13px;
	cursor: pointer;
}
.m-copy:hover { background: var(--m-gold); color: var(--m-maroon-dk); }
.m-copy.m-done { background: #2e7d32; border-color: #2e7d32; }

/* bhajan button in theme colours */
.m-btn-gold {
	background: linear-gradient(135deg, var(--m-gold-lt), var(--m-gold));
	color: var(--m-maroon-dk) !important;
	border: 1px solid #fff3d0;
	border-radius: 30px;
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.m-btn-gold:hover { background: #fff3d0; color: var(--m-maroon) !important; }

/* aarti rows in the timetable */
.table-responsive tbody tr.m-aarti td { background: #ffe6bd !important; }
.table-responsive tbody tr.m-aarti td:first-child::before { content: '🪔 '; }

/* footer logo block: maroon and gold instead of a yellow box */
#footer_b .footer_b1m { background: transparent !important; }
#footer_b .footer_b1m h3 {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(212, 160, 23, .6);
	border-radius: 14px;
	padding: 10px 12px;
	text-align: center;
	color: var(--m-gold-lt) !important;
}
#footer_b .footer_b1m h3 a, #footer_b .footer_b1m h3 * { color: var(--m-gold-lt) !important; }
#footer_b .footer_b1m img { border-radius: 50%; border: 2px solid var(--m-gold-lt); background: #fff; }

@media (max-width: 767.98px) {
	.m-bank { margin-left: auto; margin-right: auto; padding: 4px 14px; }
	.m-bank-label { flex-basis: 100%; font-size: 13px; }
	.m-bank-val { font-size: 16px; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.m-petals { display: none; }
	.m-reveal { opacity: 1; transform: none; transition: none; }
	.m-top { animation: none; }
	.card-r, .card1, .event-card-s-r, .card-r img, .card1 img, .event-card-s-r img { transition: none; }
}

/* ==========================================================
   Responsive layer (mobile-first fixes, Bootstrap 5 breakpoints)
   ========================================================== */

/* All sizes: no sideways scrolling, media never wider than screen */
/* Only the page itself may hide sideways overflow. Putting overflow on BOTH html and body
   turns body into a second scroll box (double scrollbar). "clip" cuts overflow without scrolling. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }
.donation-content p.fw-semibold { color: #fff3dc !important; }
.carousel-track .card { overflow: hidden; border-radius: 18px; }
.carousel-track .card > img.card-img-top { height: 100%; object-fit: cover; }

/* Tablets and phones: below 992px */
@media (max-width: 991.98px) {
	.map-container { height: auto !important; }
	.map-container iframe { width: 100%; height: 340px; display: block; }
	.donation-image { margin-top: 24px; }
}

/* Phones and small tablets: below 768px (navbar collapses here) */
@media (max-width: 767.98px) {
	/* readable base sizes */
	body { font-size: 15px; }
	h1, .font_50 { font-size: clamp(1.45rem, 6vw, 1.9rem) !important; line-height: 1.35; }
	h2 { font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important; line-height: 1.35; }
	h3 { font-size: clamp(1.15rem, 5vw, 1.45rem) !important; }

	/* opened mobile menu */
	#header .navbar-collapse {
		background: var(--m-maroon-dk);
		border: 1px solid rgba(212, 160, 23, .5);
		border-radius: 12px;
		margin: 10px 0 14px;
		padding: 4px 14px;
	}
	#header .navbar-collapse { max-height: none; overflow-y: visible; }
	#header .navbar-collapse .nav-link {
		padding: 12px 4px;
		border-bottom: 1px solid rgba(212, 160, 23, .2);
	}
	#header .navbar-collapse .nav-item:last-child .nav-link { border-bottom: 0; }
	#header .nav-link::after { display: none; }
	#header .navbar-toggler { border-color: var(--m-gold-lt); background: #fff6e3; }

	/* hero: show the title on phones too, compact, over the photo */
	.center_home .carousel-caption.display-mobile-none {
		display: block !important;
		left: 14px !important;
		right: 14px !important;
		bottom: 34px;
		padding: 14px 16px;
		text-align: left;
		background: linear-gradient(180deg, rgba(74, 15, 15, .55), rgba(74, 15, 15, .8));
		border: 1px solid rgba(246, 215, 122, .6);
		border-radius: 14px;
	}
	.center_home .carousel-caption h1 { font-size: 1.25rem !important; margin: 0; }
	.center_home .carousel-caption p { font-size: .9rem; margin-top: 6px !important; }
	.center_home .carousel-caption ul { margin-top: 10px !important; }
	.center_home .carousel-caption .button_3 { padding: 9px 22px; font-size: 14px; }
	.center_home .carousel-caption li.ms-3 { margin-left: 0 !important; }

	/* history box: left-aligned text reads better on small screens */
	#watch .watch_1r { padding: 18px 16px !important; }
	#watch .watch_1r h6 { text-align: left; font-size: 15px; }
	#watch .watch_1r .section-line-his { margin-left: 0 !important; }

	/* timetable: compact cells so 3 columns fit */
	.table-responsive td, .table-responsive th { font-size: 14px; padding: .6rem .5rem; }

	/* enquiry box: put it back in the page flow so it never covers the footer */
	section[style*="padding-bottom: 10rem"] { display: none; }
	.footer_m { margin-top: 32px !important; display: flex; flex-direction: column; }
	.footer_m2 { position: static !important; top: auto !important; order: -1; }
	#subs { padding: 0 0 24px !important; }
	#subs .subs1 { margin: 0 4px; }
	#subs h2 { font-size: 1.35rem !important; }
	#footer { padding-top: 40px !important; }
	#footer::before { top: 0; }
	#subs .subs1r { margin-top: 12px !important; margin-bottom: 8px; }

	/* footer links: comfortable tap targets */
	#footer h6 { padding: 4px 0; }
	#footer_b .text-center, #footer_b .text-end { text-align: center !important; }

	/* photo sliders: shorter cards on phones */
	.carousel-track .card { height: 260px !important; }
	.carousel-track .card1 { height: 280px !important; }

	/* gallery tabs and sliders */
	.btn-r { padding: 8px 16px; font-size: 14px; }
	.carousel-btn, .nav-btn-r { width: 38px; height: 38px; }

	/* donation */
	.donation-content { text-align: center; }
	.donation-content h5 { font-size: 15px; word-break: break-word; }

	/* diya button smaller and out of the way */
	.m-top { width: 42px; height: 42px; line-height: 38px; font-size: 19px; right: 12px; bottom: 76px; }
}

/* Small phones: below 576px */
@media (max-width: 575.98px) {
	.container, .container-xl { padding-left: 16px; padding-right: 16px; }
	#header .title-r { font-size: 16px !important; }
	.map-container iframe { height: 280px; }
	.payment-icons img { height: 34px; }
}

@media (max-width: 768px) {
	#top .a_tag { white-space: normal; }
	#top .a_tag::before,
	#top .a_tag::after { display: none; }
	.underline-r, .underline-s-r, .section-line-his, .map-section .underline { width: 160px !important; }
}