@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

:root {

/* Earthy + Energetic Palette */

--clr-bg: #0f0e0c;

--clr-surface: #1a1713;

--clr-surface2: #211e19;

--clr-border: rgba(200,160,80,.18);

--clr-terracotta: #d4622a; /* pottery / fire */

--clr-amber: #f0a033; /* warm energy */

--clr-gold: #f5c842; /* prize / glory */

--clr-leaf: #4a9b6f; /* nature / clean */

--clr-soil: #7c5432; /* earth / roots */

--clr-cream: #f5ebe0; /* heritage paper */

--clr-text: #f0e8d8;

--clr-muted: #a09070;

--ff-head: 'Outfit', sans-serif;

--ff-body: 'Outfit', sans-serif;

--radius-sm: 8px;

--radius-md: 16px;

--radius-lg: 28px;

--shadow-glow-amber: 0 0 32px rgba(240,160,51,.35);

--shadow-glow-terra: 0 0 28px rgba(212,98,42,.4);

--transition: 0.35s cubic-bezier(.4,0,.2,1);

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {

scroll-behavior: smooth;

font-size: 16px;

overflow-x: hidden;

}

body {

font-family: var(--ff-body);

background: var(--clr-bg);

color: var(--clr-text);

overflow-x: hidden;

line-height: 1.65;

}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {

width: 92%;

max-width: 1200px;

margin-inline: auto;

}

.section-label {

font-size: .75rem;

font-weight: 700;

letter-spacing: .18em;

text-transform: uppercase;

color: var(--clr-amber);

margin-bottom: .6rem;

}

.section-title {

font-size: clamp(1.7rem, 5vw, 3rem);

font-weight: 900;

line-height: 1.15;

margin-bottom: 1rem;

}

.section-desc {

color: var(--clr-muted);

max-width: 60ch;

font-size: 1rem;

}

section { padding: 5rem 0; }

.reveal {

opacity: 0;

transform: translateY(40px);

transition: opacity .7s ease, transform .7s ease;

}

.reveal.visible {

opacity: 1;

transform: translateY(0);

}

.reveal-left {

opacity: 0;

transform: translateX(-50px);

transition: opacity .7s ease, transform .7s ease;

}

.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {

opacity: 0;

transform: translateX(50px);

transition: opacity .7s ease, transform .7s ease;

}

.reveal-right.visible { opacity: 1; transform: translateX(0); }

.delay-1 { transition-delay: .1s !important; }

.delay-2 { transition-delay: .2s !important; }

.delay-3 { transition-delay: .3s !important; }

.delay-4 { transition-delay: .4s !important; }

.btn {

display: inline-flex;

align-items: center;

gap: .5rem;

padding: .85rem 2rem;

border-radius: 50px;

font-weight: 700;

font-size: 1rem;

transition: var(--transition);

white-space: nowrap;

min-height: 48px; /* touch-friendly */

}

.btn-primary {

background: linear-gradient(135deg, var(--clr-terracotta), var(--clr-amber));

color: #fff;

box-shadow: var(--shadow-glow-terra);

}

.btn-primary:hover {

transform: translateY(-3px) scale(1.03);

box-shadow: var(--shadow-glow-amber), 0 12px 40px rgba(0,0,0,.4);

}

.btn-outline {

border: 2px solid var(--clr-amber);

color: var(--clr-amber);

padding: .75rem 1.75rem;

}

.btn-outline:hover {

background: var(--clr-amber);

color: #0f0e0c;

transform: translateY(-2px);

}

@keyframes pulse-ring {

0% { box-shadow: 0 0 0 0 rgba(240,160,51,.7); }

70% { box-shadow: 0 0 0 18px rgba(240,160,51,0); }

100% { box-shadow: 0 0 0 0 rgba(240,160,51,0); }

}

.btn-pulse { animation: pulse-ring 2.2s infinite; }

#header {

position: fixed;

top: 0; left: 0; right: 0;

z-index: 999;

padding: 1rem 0;

transition: background var(--transition), backdrop-filter var(--transition),

box-shadow var(--transition), padding var(--transition);

}

#header.scrolled {

background: rgba(15,14,12,.92);

backdrop-filter: blur(18px);

box-shadow: 0 2px 32px rgba(0,0,0,.6);

padding: .6rem 0;

}

.header-inner {

display: flex;

align-items: center;

justify-content: space-between;

gap: 1rem;

}

.logo {

display: flex;

flex-direction: column;

line-height: 1;

}

.logo-img {

height: 44px;

width: auto;

border-radius: 50%;

object-fit: contain;

transition: transform var(--transition);

}

.logo:hover .logo-img {

transform: scale(1.08);

}

.footer-logo-img {

height: 56px;

}

.logo-main {

font-size: 1.1rem;

font-weight: 900;

letter-spacing: .04em;

background: linear-gradient(90deg, var(--clr-amber), var(--clr-terracotta));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.logo-sub {

font-size: .65rem;

letter-spacing: .14em;

color: var(--clr-muted);

text-transform: uppercase;

}

.nav-links {

display: none;

gap: 1.8rem;

}

.nav-links a {

font-size: .9rem;

font-weight: 600;

color: var(--clr-cream);

opacity: .8;

transition: opacity var(--transition), color var(--transition);

padding: .2rem 0;

position: relative;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -2px; left: 0;

width: 0; height: 2px;

background: var(--clr-amber);

transition: width var(--transition);

}

.nav-links a:hover { opacity: 1; color: var(--clr-amber); }

.nav-links a:hover::after { width: 100%; }

.hamburger {

display: flex;

flex-direction: column;

gap: 5px;

padding: 8px;

min-width: 44px;

min-height: 44px;

justify-content: center;

align-items: center;

border-radius: var(--radius-sm);

transition: background var(--transition);

}

.hamburger:hover { background: rgba(255,255,255,.07); }

.hamburger span {

display: block;

width: 24px;

height: 2px;

background: var(--clr-cream);

border-radius: 2px;

transition: transform var(--transition), opacity var(--transition), width var(--transition);

}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {

position: fixed;

top: 0; right: -100%;

width: min(320px, 90vw);

height: 100dvh;

background: var(--clr-surface);

padding: 5rem 2rem 2rem;

display: flex;

flex-direction: column;

gap: 2rem;

z-index: 998;

transition: right var(--transition);

border-left: 1px solid var(--clr-border);

}

.mobile-nav.open { right: 0; }

.mobile-nav a {

font-size: 1.2rem;

font-weight: 700;

padding: .75rem 0;

border-bottom: 1px solid var(--clr-border);

color: var(--clr-cream);

transition: color var(--transition), padding-left var(--transition);

}

.mobile-nav a:hover { color: var(--clr-amber); padding-left: .5rem; }

.nav-overlay {

position: fixed;

inset: 0;

background: rgba(0,0,0,.6);

z-index: 997;

opacity: 0;

pointer-events: none;

transition: opacity var(--transition);

}

.nav-overlay.open { opacity: 1; pointer-events: all; }

#hero {

min-height: 100dvh;

position: relative;

display: flex;

align-items: center;

overflow: hidden;

padding-top: 80px;

}

.hero-parallax-bg {

position: absolute;

inset: -10%;

background:

radial-gradient(ellipse 80% 60% at 30% 50%, rgba(212,98,42,.22) 0%, transparent 60%),

radial-gradient(ellipse 60% 50% at 75% 30%, rgba(74,155,111,.14) 0%, transparent 55%),

radial-gradient(ellipse 50% 40% at 50% 90%, rgba(124,84,50,.18) 0%, transparent 60%),

linear-gradient(180deg, #0f0e0c 0%, #150e07 50%, #0f0e0c 100%);

will-change: transform;

}

.hero-pattern {

position: absolute;

inset: 0;

background-image:

repeating-linear-gradient(

0deg,

transparent,

transparent 80px,

rgba(200,160,80,.04) 80px,

rgba(200,160,80,.04) 81px

),

repeating-linear-gradient(

90deg,

transparent,

transparent 80px,

rgba(200,160,80,.04) 80px,

rgba(200,160,80,.04) 81px

);

pointer-events: none;

}

.hero-content {

position: relative;

z-index: 2;

text-align: center;

padding: 2rem 0 4rem;

}

.hero-badge {

display: inline-flex;

align-items: center;

gap: .5rem;

background: rgba(240,160,51,.12);

border: 1px solid rgba(240,160,51,.3);

border-radius: 50px;

padding: .35rem 1rem;

font-size: .78rem;

font-weight: 700;

letter-spacing: .12em;

text-transform: uppercase;

color: var(--clr-amber);

margin-bottom: 1.5rem;

}

.hero-headline {

font-size: clamp(2.4rem, 10vw, 7rem);

font-weight: 900;

line-height: 1.0;

letter-spacing: -.02em;

background: linear-gradient(135deg, #fff 30%, var(--clr-amber) 60%, var(--clr-terracotta) 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: .5rem;

}

.hero-sub {

font-size: clamp(1.1rem, 3.5vw, 1.8rem);

font-weight: 600;

color: var(--clr-amber);

letter-spacing: .25em;

margin-bottom: 1.5rem;

}

.hero-desc {

font-size: clamp(.95rem, 2.5vw, 1.1rem);

color: var(--clr-muted);

max-width: 52ch;

margin: 0 auto 2.5rem;

line-height: 1.75;

}

.quick-info {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: .75rem 1.5rem;

margin-bottom: 2.5rem;

}

.quick-info-item {

display: flex;

align-items: center;

gap: .5rem;

font-size: .9rem;

font-weight: 600;

color: var(--clr-cream);

background: rgba(255,255,255,.06);

border: 1px solid var(--clr-border);

border-radius: 50px;

padding: .5rem 1.1rem;

min-height: 44px;

backdrop-filter: blur(8px);

}

.quick-info-item .icon { font-size: 1.1rem; }

@keyframes float1 {

0%,100% { transform: translateY(0) rotate(0deg); }

50% { transform: translateY(-20px) rotate(8deg); }

}

@keyframes float2 {

0%,100% { transform: translateY(0) rotate(0deg); }

50% { transform: translateY(15px) rotate(-6deg); }

}

.hero-deco {

position: absolute;

border-radius: 50%;

pointer-events: none;

opacity: .55;

}

.hero-deco-1 {

width: clamp(80px,15vw,200px);

height: clamp(80px,15vw,200px);

background: radial-gradient(circle, rgba(212,98,42,.4), transparent 70%);

top: 15%; left: 5%;

animation: float1 7s ease-in-out infinite;

}

.hero-deco-2 {

width: clamp(60px,10vw,140px);

height: clamp(60px,10vw,140px);

background: radial-gradient(circle, rgba(74,155,111,.35), transparent 70%);

bottom: 20%; right: 8%;

animation: float2 9s ease-in-out infinite;

}

.hero-deco-3 {

width: clamp(40px,7vw,100px);

height: clamp(40px,7vw,100px);

background: radial-gradient(circle, rgba(245,200,66,.3), transparent 70%);

top: 50%; right: 15%;

animation: float1 5s ease-in-out infinite 1s;

}

@keyframes bounce-down {

0%,100% { transform: translateX(-50%) translateY(0); }

50% { transform: translateX(-50%) translateY(8px); }

}

.scroll-cue {

position: absolute;

bottom: 2rem;

left: 50%;

transform: translateX(-50%);

display: flex;

flex-direction: column;

align-items: center;

gap: .4rem;

color: var(--clr-muted);

font-size: .75rem;

letter-spacing: .1em;

animation: bounce-down 2s ease-in-out infinite;

}

.scroll-cue svg { opacity: .6; }

#about {

background: var(--clr-surface);

position: relative;

overflow: hidden;

}

#about::before {

content: '';

position: absolute;

top: -80px; left: -80px;

width: 350px; height: 350px;

background: radial-gradient(circle, rgba(212,98,42,.1) 0%, transparent 70%);

pointer-events: none;

}

.about-grid {

display: grid;

gap: 3rem;

}

.about-image-wrap {

position: relative;

border-radius: var(--radius-lg);

overflow: hidden;

min-height: 280px;

background: var(--clr-surface2);

display: flex;

align-items: center;

justify-content: center;

border: 1px solid var(--clr-border);

}

.pottery-graphic {

display: flex;

flex-direction: column;

align-items: center;

gap: 1rem;

}

.pottery-svg-wrap {

animation: float1 6s ease-in-out infinite;

}

.pottery-label {

font-size: .8rem;

letter-spacing: .12em;

color: var(--clr-muted);

text-transform: uppercase;

}

.about-bullets {

display: flex;

flex-direction: column;

gap: .75rem;

margin: 1.5rem 0;

}

.about-bullets li {

display: flex;

align-items: flex-start;

gap: .75rem;

font-size: .95rem;

color: var(--clr-cream);

padding: .6rem 0;

border-bottom: 1px solid var(--clr-border);

}

.bullet-icon {

width: 28px;

height: 28px;

min-width: 28px;

border-radius: 50%;

background: linear-gradient(135deg, var(--clr-terracotta), var(--clr-amber));

display: flex;

align-items: center;

justify-content: center;

font-size: .85rem;

margin-top: .1rem;

}

.about-closing {

font-size: 1rem;

font-style: italic;

color: var(--clr-amber);

font-weight: 600;

margin-top: .5rem;

}

#activities {

background: var(--clr-bg);

position: relative;

overflow: hidden;

}

#activities::before {

content: '';

position: absolute;

inset: 0;

background:

radial-gradient(ellipse 60% 40% at 20% 60%, rgba(212,98,42,.08) 0%, transparent 65%),

radial-gradient(ellipse 50% 40% at 80% 40%, rgba(74,155,111,.06) 0%, transparent 60%);

pointer-events: none;

}

.activities-grid {

display: grid;

gap: 1.5rem;

margin-top: 3rem;

}

.activity-card {

background: linear-gradient(160deg, rgba(35,30,24,.95) 0%, rgba(22,19,15,.98) 100%);

border: 1px solid var(--clr-accent-border, rgba(212,98,42,.35));

border-top: 3px solid var(--clr-accent-border, rgba(212,98,42,.6));

border-radius: var(--radius-md);

padding: 2rem 1.75rem;

position: relative;

overflow: hidden;

transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

box-shadow:

0 4px 24px rgba(0,0,0,.3),

inset 0 1px 0 rgba(255,255,255,.04);

animation: card-breathe 4s ease-in-out infinite;

}

@keyframes card-breathe {

0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 0 0 rgba(var(--glow-rgb, 212,98,42), 0), inset 0 1px 0 rgba(255,255,255,.04); }

50% { box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 0 30px rgba(var(--glow-rgb, 212,98,42), .12), inset 0 1px 0 rgba(255,255,255,.04); }

}

.activity-card::before {

content: '';

position: absolute;

inset: 0;

background:

linear-gradient(135deg, var(--clr-accent, rgba(212,98,42,.1)) 0%, transparent 50%),

radial-gradient(ellipse at 80% 100%, var(--clr-accent, rgba(212,98,42,.06)) 0%, transparent 50%);

transition: opacity var(--transition);

opacity: 1;

}

.activity-card::after {

content: '';

position: absolute;

top: 0; left: -100%;

width: 60%;

height: 100%;

background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 50%, transparent 100%);

transition: left .6s ease;

pointer-events: none;

z-index: 1;

}

.activity-card:hover::after {

left: 130%;

}

.activity-card:hover {

transform: translateY(-8px) scale(1.02);

border-color: var(--clr-accent-border, rgba(212,98,42,.7));

box-shadow:

0 20px 60px rgba(0,0,0,.5),

0 0 40px var(--clr-accent, rgba(212,98,42,.15)),

inset 0 1px 0 rgba(255,255,255,.06);

animation: none;

}

.card-icon-wrap {

width: 60px;

height: 60px;

border-radius: var(--radius-sm);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.8rem;

margin-bottom: 1.25rem;

background: rgba(212,98,42,.15);

border: 1px solid rgba(212,98,42,.35);

transition: var(--transition);

position: relative;

z-index: 2;

}

.activity-card:hover .card-icon-wrap {

background: rgba(212,98,42,.25);

transform: scale(1.12) rotate(-5deg);

box-shadow: 0 0 20px var(--clr-accent, rgba(212,98,42,.25));

}

.card-title {

font-size: 1.25rem;

font-weight: 800;

margin-bottom: .75rem;

color: var(--clr-cream);

position: relative;

z-index: 2;

}

.card-features {

display: flex;

flex-direction: column;

gap: .5rem;

position: relative;

z-index: 2;

}

.card-features li {

font-size: .9rem;

color: var(--clr-muted);

display: flex;

align-items: center;

gap: .5rem;

transition: color .25s ease;

}

.activity-card:hover .card-features li {

color: var(--clr-cream);

}

.card-features li::before {

content: '▸';

color: var(--clr-amber);

font-size: .75rem;

}

.card-run {

--clr-accent: rgba(212,98,42,.12);

--clr-accent-border: rgba(212,98,42,.45);

--glow-rgb: 212,98,42;

}

.card-run .card-icon-wrap { background: rgba(212,98,42,.15); border-color: rgba(212,98,42,.4); }

.card-clean {

--clr-accent: rgba(74,155,111,.12);

--clr-accent-border: rgba(74,155,111,.45);

--glow-rgb: 74,155,111;

}

.card-clean .card-icon-wrap { background: rgba(74,155,111,.15); border-color: rgba(74,155,111,.4); }

.card-clean:hover .card-icon-wrap { background: rgba(74,155,111,.25); box-shadow: 0 0 20px rgba(74,155,111,.25); }

.card-hunt {

--clr-accent: rgba(245,200,66,.12);

--clr-accent-border: rgba(245,200,66,.45);

--glow-rgb: 245,200,66;

}

.card-hunt .card-icon-wrap { background: rgba(245,200,66,.15); border-color: rgba(245,200,66,.4); }

.card-hunt:hover .card-icon-wrap { background: rgba(245,200,66,.25); box-shadow: 0 0 20px rgba(245,200,66,.25); }

.card-video {

--clr-accent: rgba(180,130,220,.12);

--clr-accent-border: rgba(180,130,220,.45);

--glow-rgb: 180,130,220;

}

.card-video .card-icon-wrap { background: rgba(180,130,220,.15); border-color: rgba(180,130,220,.4); }

.card-video:hover .card-icon-wrap { background: rgba(180,130,220,.25); box-shadow: 0 0 20px rgba(180,130,220,.25); }

.card-prizes {

display: flex;

flex-wrap: wrap;

gap: .5rem;

margin-bottom: .75rem;

position: relative;

z-index: 2;

}

.card-prize {

display: inline-flex;

align-items: center;

gap: .25rem;

padding: .3rem .85rem;

border-radius: 50px;

font-size: .8rem;

font-weight: 700;

}

.card-prize.gold {

background: rgba(245,200,66,.18);

border: 1px solid rgba(245,200,66,.45);

color: var(--clr-gold);

box-shadow: 0 0 12px rgba(245,200,66,.1);

}

.card-prize.silver {

background: rgba(192,192,210,.12);

border: 1px solid rgba(200,200,220,.35);

color: #c0c8d8;

}

@keyframes run-icon {

0%,100% { transform: translateX(0); }

50% { transform: translateX(6px); }

}

.card-run:hover .card-icon-wrap { animation: run-icon .5s ease-in-out infinite alternate; transform: none; }

#route {

background: var(--clr-surface);

overflow: hidden;

}

.route-wrap {

display: grid;

gap: 3rem;

}

.map-placeholder {

min-height: 320px;

border-radius: var(--radius-lg);

background: var(--clr-surface2);

border: 1px solid var(--clr-border);

position: relative;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.map-svg-container {

width: 100%;

height: 100%;

position: absolute;

inset: 0;

}

.map-inner {

position: relative;

z-index: 2;

text-align: center;

}

.map-inner h3 { font-size: 1.1rem; color: var(--clr-amber); font-weight: 700; margin-bottom: .5rem; }

.map-inner p { font-size: .85rem; color: var(--clr-muted); }

@keyframes draw-path {

to { stroke-dashoffset: 0; }

}

.map-route-path {

stroke-dasharray: 1200;

stroke-dashoffset: 1200;

animation: draw-path 3.5s ease forwards;

animation-play-state: paused;

}

.map-route-path.animate { animation-play-state: running; }

.start-end-marker {

display: inline-flex;

align-items: center;

gap: .5rem;

background: linear-gradient(135deg, var(--clr-terracotta), var(--clr-amber));

border-radius: 50px;

padding: .45rem 1rem;

font-size: .82rem;

font-weight: 700;

margin-top: 1rem;

}

.route-info-list {

display: flex;

flex-direction: column;

gap: .75rem;

}

.route-info-item {

display: flex;

align-items: flex-start;

gap: 1rem;

padding: 1rem;

background: var(--clr-surface2);

border-radius: var(--radius-sm);

border-left: 3px solid var(--clr-amber);

font-size: .9rem;

color: var(--clr-cream);

}

.route-info-icon { font-size: 1.2rem; min-width: 1.5rem; text-align: center; }

#prizes {

background: var(--clr-bg);

text-align: center;

position: relative;

overflow: hidden;

}

#prizes::before {

content: '';

position: absolute;

inset: 0;

background:

radial-gradient(ellipse 70% 50% at 50% 50%, rgba(245,200,66,.07) 0%, transparent 65%);

pointer-events: none;

}

.prizes-tagline {

font-size: .9rem;

color: var(--clr-muted);

margin-bottom: 3rem;

font-weight: 500;

}

.prizes-grid {

display: grid;

gap: 1.5rem;

max-width: 600px;

margin: 0 auto 2.5rem;

}

.prizes-grid-4 {

max-width: 900px;

grid-template-columns: repeat(2, 1fr);

}

.prize-green {

background: linear-gradient(145deg, rgba(74,155,111,.12), rgba(74,155,111,.06));

border-color: rgba(74,155,111,.4);

}

.prize-green:hover { box-shadow: 0 20px 60px rgba(74,155,111,.2); }

.prize-green .prize-rank { color: var(--clr-leaf); }

.prize-green .prize-amount { color: var(--clr-leaf); }

.prize-amber {

background: linear-gradient(145deg, rgba(240,160,51,.12), rgba(245,200,66,.06));

border-color: rgba(240,160,51,.4);

}

.prize-amber:hover { box-shadow: 0 20px 60px rgba(240,160,51,.2); }

.prize-amber .prize-rank { color: var(--clr-amber); }

.prize-amber .prize-amount { color: var(--clr-amber); }

.prize-card {

border-radius: var(--radius-md);

padding: 2.5rem 2rem;

position: relative;

overflow: hidden;

border: 1px solid;

transition: transform var(--transition), box-shadow var(--transition);

}

.prize-card:hover { transform: translateY(-6px) scale(1.02); }

.prize-gold {

background: linear-gradient(145deg, rgba(245,200,66,.12), rgba(212,98,42,.08));

border-color: rgba(245,200,66,.4);

}

.prize-gold:hover { box-shadow: 0 20px 60px rgba(245,200,66,.2); }

.prize-silver {

background: linear-gradient(145deg, rgba(192,192,210,.1), rgba(140,140,160,.06));

border-color: rgba(200,200,220,.3);

}

.prize-silver:hover { box-shadow: 0 20px 60px rgba(200,200,230,.12); }

.prize-medal {

font-size: 3rem;

margin-bottom: 1rem;

display: block;

}

.prize-rank {

font-size: .8rem;

letter-spacing: .15em;

text-transform: uppercase;

margin-bottom: .5rem;

}

.prize-gold .prize-rank { color: var(--clr-gold); }

.prize-silver .prize-rank { color: #b0b8c8; }

.prize-amount {

font-size: clamp(2.5rem, 8vw, 4rem);

font-weight: 900;

line-height: 1;

margin-bottom: .25rem;

}

.prize-gold .prize-amount { color: var(--clr-gold); }

.prize-silver .prize-amount { color: #c0c8d8; }

.prize-note {

font-size: .82rem;

color: var(--clr-muted);

}

.prizes-certs {

display: inline-flex;

align-items: center;

gap: .6rem;

background: rgba(74,155,111,.12);

border: 1px solid rgba(74,155,111,.3);

border-radius: 50px;

padding: .6rem 1.5rem;

color: var(--clr-leaf);

font-weight: 700;

font-size: .9rem;

}

#details {

background: var(--clr-surface);