@font-face {
font-family:GujaratiSerif;
src:local("Noto Serif Gujarati");
}
:root {
--gold:#c99a2f;
--brown:#653213;
--dark:#100804;
--cream:#fff4e7;
--line:#e3c49e;
--shadow:0 12px 28px rgba(79, 40, 13, .18)
}
* {
	box-sizing:border-box
}
html, body {
	margin:0
}
body {
	background:#f8e8d4;
	color:#321d12;
	font-family:Georgia, GujaratiSerif, "Noto Serif Gujarati", "Nirmala UI", serif
}
.page {
	width:min(1023px, 100%);
	margin:0 auto;
	background:linear-gradient(#fff5e8, #fff0df);
	box-shadow:0 0 40px rgba(40, 18, 7, .18);
	overflow:hidden
}
.hero-grid {
	display:grid;
	grid-template-columns:1fr 1.9fr 1fr;
	background:#050302;
	padding:8px 10px 6px;
	gap:0
}
.hero-tile {
	height:374px;
	border:1px solid var(--gold);
	overflow:hidden;
	background:#080604;
	box-shadow:inset 0 0 1px rgba(255, 220, 120, .25); text-align:center;
}
.hero-tile+ .hero-tile {
	border-left:0
}
 
.tribute-grid {
	display:grid;
	grid-template-columns:1fr 1.12fr;
	background:#080403;
	padding:8px 10px 7px;
	gap:8px
}
.tribute-tile {
	height:400px;
	border:1px solid var(--gold);
	overflow:hidden;
	background:#071125;
	box-shadow:inset 0 0 18px rgba(0, 0, 0, .35)
}
 
.nav-bar {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	height:122px;
	background:linear-gradient(180deg, #fff9ef, #faead6);
	box-shadow:0 8px 20px rgba(87, 42, 12, .14);
	border-bottom:1px solid #ead2b3
}
.nav-bar a {
	text-decoration:none;
	color:#201510;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:9px;
	font-size:20px;
	font-weight:700;
	border-right:1px solid var(--line)
}
.nav-bar a:last-child {
	border-right:0
}
.nav-bar a.active {
	color:#7c3c16
}
.nav-bar svg {
	width:37px;
	height:37px;
	fill:currentColor;
	stroke:currentColor
}
.intro-card {
	margin:28px 31px 24px;
	min-height:268px;
	padding:38px 45px 34px;
	text-align:center;
	background:#f6ece3;
	border:1px solid #e3d3c6;
	border-radius:0;
	box-shadow:var(--shadow);
	position:relative
}
.intro-card h1 {
	margin:0 0 20px;
	color:#6b351a;
	font-size:34px;
	line-height:1.35;
	font-weight:800
}
.intro-card p {
	margin:4px 0;
	color:#30251f;
	font-size:20px;
	line-height:1.55;
	font-weight:600
}
.ornament {
width:155px;
height:18px;
margin:0 auto 18px;
position:relative; background:url(../images/title-boder.png) center center;
}
.ornament:before, .ornament:after {
	content:"";
	position:absolute;
	top:8px;
	width:62px;
	border-top:1px solid #d59a5a
}
.ornament:before {
	left:0
}
.ornament:after {
	right:0
}
.ornament {
	color:#d59a5a
}
.ornament:after {
}
.ornament:before {
}
.ornament::selection {
background:transparent
}
.intro-card .corner {
	position:absolute;
	width:54px;
	height:54px;
	border-color:#d78d50;
	opacity:.9
}
.tl {
	top:13px;
	left:13px;
	border-top:1px solid;
	border-left:1px solid
}
.tr {
	top:13px;
	right:13px;
	border-top:1px solid;
	border-right:1px solid
}
.bl {
	bottom:13px;
	left:13px;
	border-bottom:1px solid;
	border-left:1px solid
}
.br {
	bottom:13px;
	right:13px;
	border-bottom:1px solid;
	border-right:1px solid
}
.cards-grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
	padding:0 29px 24px
}
.info-card {
	background:#fff7eb;
	border:1px solid #ead0ad;
	border-radius:10px;
	overflow:hidden;
	box-shadow:var(--shadow)
}
.info-card>img {
	width:100%;
	height:155px;
	object-fit:cover;
	display:block
}
.card-body {
	text-align:center;
	padding:0 16px 19px;
	background:linear-gradient(180deg, #fffaf1, #fff2e2);
	min-height:205px
}
.card-icon {
	width:66px;
	height:66px;
	border-radius:50%;
	margin:-33px auto 4px;
	background:linear-gradient(180deg, #b97837, #834214);
	border:5px solid #fff6e9;
	color:#fff;
	display:grid;
	place-items:center;
	position:relative;
	z-index:2;
	box-shadow:0 6px 14px rgba(83, 39, 12, .25)
}
.card-icon svg {
	width:31px;
	height:31px;
	fill:currentColor;
	stroke:currentColor
}
.info-card h2 {
	font-size:15px;
	margin:2px 0 9px;
	color:#6b3518;
	line-height:1.15
}
.info-card p {
	font-size:14px;
	line-height:1.55;
	margin:0 0 16px;
	font-weight:600;
	color:#2e2019
}
.info-card a {
	display:inline-block;
	text-decoration:none;
	color:#fff;
	background:linear-gradient(#9b5728, #69320f);
	border-radius:5px;
	padding:10px 27px;
	font:700 16px Arial, sans-serif;
	box-shadow:0 5px 13px rgba(77, 35, 12, .24); font-size:12px
}

.info-card a:hover {background:#000} 

.footer {
	background:linear-gradient(#3b2011, #1c0d06);
	color:#fff;
	text-align:center;
	font:16px Arial, sans-serif;
	padding:17px 10px 20px
}
@media(max-width:900px) {
.hero-grid {
grid-template-columns:1fr
}
.hero-tile {
height:auto;
aspect-ratio:1.1/1
}
.hero-tile+ .hero-tile {
border-left:1px solid var(--gold);
border-top:0; text-align:center;
}
.hero-wide img { max-width:100%;}
.tribute-grid {
grid-template-columns:1fr
}
.tribute-tile {
height:auto;
aspect-ratio:1.17/1
}
.nav-bar {
height:92px
}
.nav-bar a {
font-size:16px
}
.nav-bar svg {
width:30px;
height:30px
}
.intro-card {
margin:20px 14px;
padding:30px 18px
}
.intro-card h1 {
font-size:25px
}
.intro-card p {
font-size:17px
}
.cards-grid {
grid-template-columns:1fr;
padding:0 14px 18px
}
.info-card>img {
height:190px
}
}
@media(max-width:520px) {
.page {
width:100%
}
.hero-grid, .tribute-grid {
padding:5px
}
.tribute-grid {
gap:5px
}
.intro-card {
min-height:auto
}
.intro-card h1 {
font-size:22px
}
.intro-card p {
font-size:15px
}
.nav-bar a {
font-size:14px
}
.cards-grid {
gap:15px
}
.footer {
font-size:13px
}
}
.tribute-text-card {
	display:flex;
	align-items:center;
	background:#06214d;
	color:#fff
}
.tribute-image {
	width:42%
}
.tribute-image img {
	width:100%;
	height:100%;
	object-fit:cover
}
.tribute-content {
	padding:20px;
	text-align:center;
	width:58%
}
.tribute-content h3 {
	font-size:28px;
	line-height:1.4;
	margin:0 0 12px
}
.tribute-content p {
	font-size:24px;
	margin:0 0 16px
}
.tribute-content h4 {
	font-size:30px;
	margin:0 0 14px;
	color:#fff
}
.tribute-content span {
	font-size:24px
}
@media(max-width:768px) {
 .tribute-text-card {
flex-direction:column
}
 .tribute-image, .tribute-content {
width:100%
}
 .tribute-content h3 {
font-size:18px
}
 .tribute-content p, .tribute-content h4, .tribute-content span {
font-size:16px
}
}
/* Final visual match for Shyamji Krishna Varma HTML text banner */
.tribute-grid {
	grid-template-columns: 1fr 1.12fr;
 
	gap:8px;
}
.tribute-tile {
	border:1px solid #d3a229;
}
.shyamji-card {
	position:relative;
	overflow:hidden;
	display:block;
	border:1px solid #d3a229;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, .38);
}
 
.shyamji-portrait {
	position:absolute;
	left:0;
	bottom:0;
	height:100%;
	width:100%;
	object-fit:cover;
	object-position:left bottom;
	z-index:1;
	filter: drop-shadow(10px 0 18px rgba(0, 0, 0, .35));
}
.tribute-content {
	position:relative;
	z-index:2;
	margin-left:39%;
	width:61%;
	height:100%;
	padding:72px 22px 36px 10px;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	color:#fff;
	font-family:"Noto Serif Gujarati", "Nirmala UI", Georgia, serif;
	text-shadow:0 2px 4px rgba(0, 0, 0, .65);
}
.tribute-content h3, .tribute-content p, .tribute-content h4, .tribute-content span {
	color:#fff;
	margin:0;
	font-weight:700;
	letter-spacing:.1px;
}
.tribute-content h3 {
	font-size:14px;
	line-height:1.55;
	margin-bottom:16px;
	max-width:95%;
}
.tribute-content p {
	font-size:14px;
	line-height:1.45;
	margin-bottom:22px;
}
.tribute-content h4 {
	font-size:14px;
	line-height:1.45;
	margin-bottom:16px;
}
.tribute-content span {
	font-family:Arial, sans-serif;
	font-size:14px;
	font-weight:700;
}
.gold-corner {
	position:absolute;
	z-index:3;
	width:54px;
	height:54px;
	opacity:.92;
	pointer-events:none;
}
 .gold-corner::before, .gold-corner::after {
 content:"";
 position:absolute;
 background:#d3a229;
 box-shadow:0 0 4px rgba(211, 162, 41, .45);
}
 .gold-corner::before {
height:1px;
width:54px;
}
.gold-corner::after {
width:1px;
height:54px;
}
.gold-corner.top-left {
	top:6px;
	left:6px;
}
.gold-corner.top-left::before {
top:0;
left:0;
}
.gold-corner.top-left::after {
top:0;
left:0;
}
.gold-corner.top-right {
	top:6px;
	right:6px;
}
.gold-corner.top-right::before {
top:0;
right:0;
}
.gold-corner.top-right::after {
top:0;
right:0;
}
.gold-corner.bottom-left {
	bottom:6px;
	left:6px;
}
.gold-corner.bottom-left::before {
bottom:0;
left:0;
}
.gold-corner.bottom-left::after {
bottom:0;
left:0;
}
.gold-corner.bottom-right {
	bottom:6px;
	right:6px;
}
.gold-corner.bottom-right::before {
bottom:0;
right:0;
}
.gold-corner.bottom-right::after {
bottom:0;
right:0;
}
 @media(max-width:900px) {
 .tribute-grid {
grid-template-columns:1fr;
}
 .tribute-tile {
height:auto;
min-height:260px;
aspect-ratio:1.28/1;
}
 .shyamji-portrait {
width:100%;
}
 .tribute-content {
 margin-left:36%;
 width:64%;
 padding:44px 14px 26px 8px;
}
 .tribute-content h3 {
font-size:17px;
margin-bottom:10px;
}
 .tribute-content p {
font-size:16px;
margin-bottom:12px;
}
 .tribute-content h4 {
font-size:16px;
margin-bottom:10px;
}
 .tribute-content span {
font-size:14px;
}
}
 @media(max-width:520px) {
 .tribute-tile {
min-height:230px;
}
 .shyamji-portrait {
width:100%;
}
 .tribute-content {
 margin-left:40%;
 width:60%;
 padding:34px 9px 22px 4px;
}
 .tribute-content h3 {
font-size:13px;
line-height:1.45;
}
 .tribute-content p {
font-size:13px;
line-height:1.35;
}
 .tribute-content h4 {
font-size:12px;
line-height:1.35;
}
 .tribute-content span {
font-size:11px;
}
 .gold-corner {
width:36px;
height:36px;
}
 .gold-corner::before {
width:36px;
}
 .gold-corner::after {
height:36px;
}
}

@media(max-width:480px) {    
.intro-card p {font-size:13px;}
.intro-card h1 {font-size:18px;}
}