/* =========================================================
SHRAVANI MELA 2026
Main Website Stylesheet
English + Hindi
Responsive Design
========================================================= */

/* =========================================================
RESET
========================================================= */

{
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

body {
font-family:
Arial,
"Noto Sans Devanagari",
"Nirmala UI",
sans-serif;

line-height: 1.7;
color: #30241f;
background: #fffaf3;

}

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

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

button,
input,
textarea,
select {
font: inherit;
}

/* =========================================================
ACCESSIBILITY
========================================================= */

a,
button,
input,
textarea,
select,
summary {
outline: 3px solid #ffd36b;
outline-offset: 3px;
}

/* =========================================================
GLOBAL CONTAINER
========================================================= */

.container {
width: 100%;
max-width: 1150px;
margin: 0 auto;
}

/* =========================================================
HEADER
========================================================= */

header {
position: sticky;
top: 0;
z-index: 1000;

color: #ffffff;

background:
    linear-gradient(
        135deg,
        #7a170d,
        #b63816
    );

box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.20);

}

.nav-container {
width: 100%;
max-width: 1200px;

margin: 0 auto;
padding: 14px 20px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

}

.logo {
display: inline-block;

font-size: 1.35rem;
font-weight: 800;

letter-spacing: 0.2px;
white-space: nowrap;

}

.logo span {
display: block;

margin-top: 2px;

font-size: 0.70rem;
font-weight: 500;

opacity: 0.9;

}

/* =========================================================
NAVIGATION
========================================================= */

nav {
display: flex;
align-items: center;
justify-content: flex-end;

flex-wrap: wrap;

gap: 8px 15px;

}

nav a {
display: inline-block;

padding: 7px 3px;

color: #ffffff;

font-size: 0.88rem;
font-weight: 600;

border-bottom: 2px solid transparent;

transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;

}

nav a,
nav a[aria-current="page"] {
color: #ffd36b;
border-bottom-color: #ffd36b;
}

nav a {
transform: translateY(-1px);
}

/* =========================================================
NOTICE BAR
========================================================= */

.notice-bar {
padding: 16px 20px;

color: #5d3510;

background: #fff0c8;

border-bottom: 1px solid #e8c36d;

}

.notice-inner {
width: 100%;
max-width: 1100px;

margin: 0 auto;

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

gap: 25px;

text-align: center;

}

.notice-inner p {
margin: 0;
color: #5d3510;
}

.notice-inner strong {
color: #8d1d0e;
}

/* =========================================================
HERO
========================================================= */

.hero {
min-height: 650px;

display: flex;
align-items: center;
justify-content: center;

padding: 80px 20px;

text-align: center;

color: #ffffff;

background:
    linear-gradient(
        rgba(83, 20, 5, 0.78),
        rgba(83, 20, 5, 0.82)
    ),
    radial-gradient(
        circle at center,
        #e58a30,
        #7b180d 70%
    );

}

.hero-content {
width: 100%;
max-width: 950px;
}

.eyebrow {
display: inline-block;

margin-bottom: 20px;
padding: 8px 16px;

border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 30px;

font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;

}

.hero h1 {
margin-bottom: 20px;

font-size: clamp(2.7rem, 7vw, 5.5rem);
line-height: 1.05;

letter-spacing: -1px;

}

.hero h1 span {
color: #ffd36b;
}

.hero h2 {
margin-bottom: 18px;

color: #ffffff;

font-size: clamp(1.25rem, 3vw, 2rem);
font-weight: 600;

}

.hero p {
max-width: 800px;

margin: 0 auto 20px;

color: #ffffff;

font-size: 1.08rem;

}

.hero p {
margin-bottom: 30px;
}

/* =========================================================
BUTTONS
========================================================= */

.hero-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;

gap: 14px;

}

.btn {
display: inline-block;

padding: 13px 24px;

border-radius: 30px;

font-weight: 700;

transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;

}

.btn {
transform: translateY(-2px);
}

.btn-primary {
color: #5c180b;
background: #ffd36b;

border: 2px solid #ffd36b;

}

.btn-primary {
color: #5c180b;
background: #ffe29a;

box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.15);

}

.btn-secondary {
color: #ffffff;

background: transparent;

border: 2px solid #ffffff;

}

.btn-secondary {
color: #7b180d;
background: #ffffff;
}

/* =========================================================
GENERAL SECTIONS
========================================================= */

section {
padding: 75px 20px;
}

section {
margin-bottom: 0;
}

.section-heading {
max-width: 800px;

margin: 0 auto 45px;

text-align: center;

}

.section-heading h2 {
margin-bottom: 12px;

color: #7b180d;

font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;

}

.section-heading p {
color: #635850;
}

/* =========================================================
GENERAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
line-height: 1.3;
}

h3 {
color: #8b1c0f;
font-size: 1.35rem;
}

p {
margin-bottom: 18px;
color: #514640;
}

p {
margin-bottom: 0;
}

ul,
ol {
margin: 15px 0 20px 25px;
color: #514640;
}

li {
margin-bottom: 8px;
}

/* =========================================================
SACRED JOURNEY
========================================================= */

.journey {
background: #ffffff;
}

.journey-grid {
display: grid;

grid-template-columns:
    1fr
    auto
    1fr;

align-items: center;

gap: 25px;

}

.journey-card {
padding: 32px;

text-align: center;

background: #fff8ed;

border: 1px solid #ecd9bd;
border-radius: 18px;

box-shadow:
    0 8px 25px rgba(60, 30, 10, 0.07);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.journey-card {
transform: translateY(-4px);

box-shadow:
    0 12px 30px rgba(60, 30, 10, 0.11);

}

.journey-card .symbol {
margin-bottom: 12px;
font-size: 2.8rem;
}

.journey-card h3 {
margin-bottom: 8px;

color: #8b1c0f;

font-size: 1.45rem;

}

.journey-card p {
color: #635850;
}

.journey-arrow {
text-align: center;

color: #b43a16;

font-weight: 800;

}

.journey-arrow .distance {
display: block;

font-size: 1.5rem;

}

.route-note {
max-width: 850px;

margin: 25px auto 0;

color: #806b5d;

text-align: center;

font-size: 0.92rem;

}

/* =========================================================
HIGHLIGHTS / CARDS
========================================================= */

.highlights,
.pilgrim-help {
background: #fff5e7;
}

.cards {
display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 22px;

}

.card {
display: flex;
flex-direction: column;

padding: 28px;

background: #ffffff;

border: 1px solid #eadbc8;
border-radius: 16px;

box-shadow:
    0 7px 22px rgba(50, 30, 10, 0.06);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.card {
transform: translateY(-4px);

box-shadow:
    0 12px 28px rgba(50, 30, 10, 0.11);

}

.card .icon {
margin-bottom: 12px;

font-size: 2rem;

}

.card h3 {
margin-bottom: 8px;
}

.card p {
color: #635850;
}

.card .btn {
align-self: flex-start;

margin-top: auto;

}

/* =========================================================
ABOUT
========================================================= */

.about {
background: #ffffff;
}

.about-content {
max-width: 900px;

margin: 0 auto;

color: #4d443e;

font-size: 1.05rem;

}

.about-content p {
margin-bottom: 18px;
}

.quote {
margin-top: 30px;
padding: 24px;

color: #702014;
font-weight: 700;

background: #fff5e7;

border-left: 5px solid #b63816;
border-radius: 8px;

}

/* =========================================================
LATEST UPDATES
========================================================= */

.updates {
background: #fff8ed;
}

.update-box {
max-width: 900px;

margin: 0 auto;

padding: 30px;

background: #ffffff;

border: 1px solid #eadbc8;
border-radius: 16px;

box-shadow:
    0 7px 22px rgba(50, 30, 10, 0.05);

}

.update-box h3 {
margin-bottom: 12px;

color: #8b1c0f;

}

.update-date {
margin-bottom: 15px;

color: #806b5d;

font-size: 0.85rem;
font-weight: 600;

}

/* =========================================================
CTA
========================================================= */

.cta {
text-align: center;

color: #ffffff;

background:
    linear-gradient(
        135deg,
        #7a170d,
        #b63816
    );

}

.cta h2 {
margin-bottom: 15px;

color: #ffffff;

font-size: clamp(2rem, 5vw, 3.4rem);

}

.cta p {
max-width: 750px;

margin: 0 auto 20px;

color: #ffffff;

opacity: 0.95;

}

.cta .btn {
margin-top: 5px;
}

/* =========================================================
FOOTER
========================================================= */

footer {
padding: 45px 20px 25px;

color: #f4e9df;

background: #2e1711;

}

.footer-grid {
width: 100%;
max-width: 1100px;

margin: 0 auto;

display: grid;

grid-template-columns:
    1.5fr
    1fr
    1fr;

gap: 30px;

}

footer h3 {
margin-bottom: 12px;

color: #ffd36b;

}

footer p,
footer a {
color: #d8c8bd;

font-size: 0.93rem;

}

footer p {
margin-bottom: 10px;
}

footer a {
color: #ffffff;
}

.copyright {
max-width: 1100px;

margin: 30px auto 0;
padding-top: 20px;

border-top:
    1px solid rgba(255, 255, 255, 0.15);

text-align: center;

color: #b9a79d;

font-size: 0.85rem;

}

/* =========================================================
GENERIC GRID SYSTEM
========================================================= */

.grid {
display: grid;
gap: 25px;
}

.grid-2 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.grid-3 {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}

.grid-4 {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}

/* =========================================================
GENERIC PLACE / ROUTE
========================================================= */

.place {
padding: 28px;

text-align: center;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 16px;

box-shadow:
    0 6px 20px rgba(60, 30, 10, 0.06);

}

.place h3 {
margin: 8px 0;

color: #8b1c0f;

}

.icon {
font-size: 2.5rem;
}

.route {
text-align: center;

color: #a32d12;

font-weight: 700;

}

.route strong {
display: block;

font-size: 1.4rem;

}

/* =========================================================
NOTICE / FACT BOX
========================================================= */

.fact-box,
.notice {
padding: 28px;
margin-top: 25px;

background: #fff1d1;

border-left: 5px solid #b63816;
border-radius: 8px;

}

.fact-box strong,
.notice strong {
color: #7b180d;
}

/* =========================================================
INFORMATION BOX
========================================================= */

.info-box {
margin-bottom: 25px;
padding: 25px;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 12px;

}

/* =========================================================
STATISTICS
========================================================= */

.stats {
display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 20px;

margin: 35px 0;

}

.stat {
padding: 25px 20px;

text-align: center;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 14px;

box-shadow:
    0 5px 18px rgba(60, 30, 10, 0.06);

}

.stat strong {
display: block;

margin-bottom: 7px;

color: #8b1c0f;

font-size: 2rem;
line-height: 1.2;

}

/* =========================================================
TABLE
========================================================= */

.table-wrapper {
width: 100%;

margin: 25px 0;

overflow-x: auto;

}

table {
width: 100%;

border-collapse: collapse;

background: #ffffff;

}

th,
td {
padding: 13px 15px;

text-align: left;

border: 1px solid #ead9c2;

}

th {
color: #ffffff;

background: #7b180d;

}

tr(even) {
background: #fff7e9;
}

/* =========================================================
GALLERY
========================================================= */

.gallery {
display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 20px;

}

.gallery-item {
overflow: hidden;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 14px;

box-shadow:
    0 5px 18px rgba(60, 30, 10, 0.06);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.gallery-item {
transform: translateY(-3px);

box-shadow:
    0 10px 25px rgba(60, 30, 10, 0.10);

}

.gallery-item img {
width: 100%;

aspect-ratio: 16 / 10;

object-fit: cover;

transition: transform 0.35s ease;

}

.gallery-item img {
transform: scale(1.03);
}

.gallery-caption {
padding: 14px;

color: #514640;

font-weight: 600;

}

/* =========================================================
VIDEO GRID
========================================================= */

.video-grid {
display: grid;

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

gap: 25px;

}

.video-card {
overflow: hidden;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 14px;

box-shadow:
    0 5px 18px rgba(60, 30, 10, 0.06);

}

.video-card video,
.video-card iframe {
display: block;

width: 100%;

aspect-ratio: 16 / 9;

border: none;

}

.video-card-content {
padding: 18px;
}

/* =========================================================
FAQ
========================================================= */

.faq-item {
margin-bottom: 15px;

overflow: hidden;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 12px;

}

.faq-item summary {
padding: 18px 20px;

cursor: pointer;

color: #7b180d;

background: #fff7e9;

font-weight: 700;

transition: background 0.2s ease;

}

.faq-item summary {
background: #ffefd0;
}

.faq-answer {
padding: 20px;
}

/* =========================================================
CONTACT FORM
========================================================= */

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;

margin-bottom: 7px;

color: #7b180d;

font-weight: 700;

}

.form-group input,
.form-group textarea,
.form-group select {
width: 100%;

padding: 12px 14px;

color: #30241f;
background: #ffffff;

border: 1px solid #d9c5ad;
border-radius: 8px;

outline: none;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}

.form-group textarea {
min-height: 150px;

resize: vertical;

}

.form-group input,
.form-group textarea,
.form-group select {
border-color: #b63816;

box-shadow:
    0 0 0 3px rgba(182, 56, 22, 0.10);

}

/* =========================================================
LOST & FOUND
========================================================= */

.lost-found-grid {
display: grid;

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

gap: 25px;

}

.lost-card,
.found-card {
padding: 28px;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 15px;

box-shadow:
    0 5px 18px rgba(60, 30, 10, 0.06);

}

.lost-card h3,
.found-card h3 {
color: #7b180d;
}

/* =========================================================
ACCOMMODATION
========================================================= */

.accommodation-grid {
display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 22px;

}

.accommodation-card {
padding: 25px;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 15px;

box-shadow:
    0 5px 18px rgba(60, 30, 10, 0.06);

}

.accommodation-card .icon {
margin-bottom: 12px;
}

/* =========================================================
EVENTS
========================================================= */

.events-list {
display: grid;

gap: 20px;

}

.event-card {
display: grid;

grid-template-columns: 130px 1fr;

gap: 25px;

padding: 25px;

background: #ffffff;

border: 1px solid #ead9c2;
border-radius: 15px;

box-shadow:
    0 5px 18px rgba(60, 30, 10, 0.06);

}

.event-date {
padding: 15px 10px;

text-align: center;

color: #ffffff;

background: #8b1c0f;

border-radius: 12px;

font-weight: 700;

}

.event-date strong {
display: block;

font-size: 1.5rem;

}

/* =========================================================
LANGUAGE CONTENT
========================================================= */

.hindi {
display: none;
}

[lang="hi"] {
font-family:
"Noto Sans Devanagari",
"Nirmala UI",
Arial,
sans-serif;
}

/* =========================================================
UTILITY CLASSES
========================================================= */

.highlight {
color: #8b1c0f;
font-weight: 700;
}

.text-center {
text-align: center;
}

.divider {
width: 80px;
height: 4px;

margin: 15px 0 25px;

background: #b63816;

border-radius: 5px;

}

.divider-center {
margin-left: auto;
margin-right: auto;
}

/* =========================================================
BACK TO TOP
========================================================= */

.back-to-top {
position: fixed;

right: 20px;
bottom: 20px;

width: 45px;
height: 45px;

display: flex;
align-items: center;
justify-content: center;

color: #ffffff;

background: #8b1c0f;

border-radius: 50%;

box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.20);

font-size: 1.2rem;

z-index: 900;

transition:
    background 0.2s ease,
    transform 0.2s ease;

}

.back-to-top {
background: #b63816;

transform: translateY(-2px);

}

/* =========================================================
RESPONSIVE — TABLETS
========================================================= */

@media (max-width: 1000px) {

.cards {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.accommodation-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.gallery {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

nav {
    gap: 7px 11px;
}

}

/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 800px) {

.nav-container {
    flex-direction: column;

    text-align: center;
}

.logo {
    white-space: normal;
}

nav {
    justify-content: center;
}

.notice-inner {
    grid-template-columns: 1fr;

    gap: 12px;
}

.hero {
    min-height: 580px;

    padding: 60px 18px;
}

.hero h1 {
    font-size: 2.7rem;
}

.journey-grid {
    grid-template-columns: 1fr;
}

.journey-arrow {
    transform: rotate(90deg);

    margin: -5px 0;
}

.cards,
.grid-2,
.grid-3,
.grid-4,
.stats,
.gallery,
.video-grid,
.lost-found-grid,
.accommodation-grid {
    grid-template-columns: 1fr;
}

.event-card {
    grid-template-columns: 1fr;
}

.event-date {
    max-width: 160px;

    margin: 0 auto;
}

.footer-grid {
    grid-template-columns: 1fr;

    text-align: center;
}

}

/* =========================================================
RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.nav-container {
    padding: 12px 14px;
}

.logo {
    font-size: 1.05rem;
}

.logo span {
    font-size: 0.65rem;
}

nav {
    gap: 5px 10px;
}

nav a {
    font-size: 0.78rem;

    padding: 5px 2px;
}

section {
    padding: 55px 16px;
}

.hero {
    min-height: 540px;

    padding: 50px 16px;
}

.hero h1 {
    font-size: 2.35rem;
}

.hero h2 {
    font-size: 1.15rem;
}

.hero p {
    font-size: 1rem;
}

.hero-buttons {
    flex-direction: column;

    align-items: stretch;
}

.hero-buttons .btn {
    width: 100%;
}

.journey-card,
.card,
.update-box,
.info-box {
    padding: 22px;
}

.section-heading {
    margin-bottom: 32px;
}

.section-heading h2 {
    font-size: 1.8rem;
}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

html {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
}

}