/* ============================================================
   Sarv Dharam Sangam — Premium Devotional Theme
   Colors: Saffron, Gold, Deep Red, White, Dark Maroon
   ============================================================ */

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

:root {
    --saffron: #ff8a00;
    --saffron-deep: #ff6a00;
    --gold: #f6c453;
    --gold-bright: #ffd86b;
    --gold-soft: #f9e0a8;
    --deep-red: #b00020;
    --maroon: #5c0a14;
    --maroon-dark: #3a060c;
    --cream: #fff7e9;
    --ink: #2a1206;
    --white: #ffffff;

    --grad-gold: linear-gradient(135deg, #f6c453 0%, #ffd86b 40%, #e0a020 100%);
    --grad-saffron: linear-gradient(135deg, #ff9d2f 0%, #ff6a00 100%);
    --grad-maroon: linear-gradient(160deg, #5c0a14 0%, #3a060c 100%);
    --grad-hero: linear-gradient(160deg, rgba(58,6,12,0.92) 0%, rgba(92,10,20,0.86) 45%, rgba(176,0,32,0.55) 100%);

    --shadow-gold: 0 10px 30px rgba(224, 160, 32, 0.35);
    --shadow-soft: 0 12px 40px rgba(58, 6, 12, 0.18);
    --radius: 18px;
    --font-head: 'Cinzel', serif;
    --font-hindi: 'Tiro Devanagari Hindi', serif;
    --font-body: 'Poppins', sans-serif;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
    max-width: 100vw;
    line-height: 1.6;
}
body.nav-open { overflow: hidden; }

.hindi { font-family: var(--font-hindi); }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
video, iframe { max-width: 100%; }
button, .btn, a { -webkit-tap-highlight-color: transparent; }
svg.social-icon-svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    display: block;
    flex-shrink: 0;
}

.container { width: min(1200px, 92%); margin-inline: auto; }

/* Mandala background pattern */
.mandala-bg {
    position: relative;
}
.mandala-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(246,196,83,0.06) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(176,0,32,0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
    font-size: 0.98rem;
    letter-spacing: 0.3px;
}
.btn-gold {
    background: var(--grad-gold);
    color: var(--maroon-dark);
    box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); box-shadow: 0 16px 38px rgba(224,160,32,0.5); }
.btn-saffron { background: var(--grad-saffron); color: #fff; box-shadow: 0 10px 26px rgba(255,106,0,0.4); }
.btn-saffron:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--gold-bright); border: 2px solid var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--maroon-dark); transform: translateY(-3px); }
.btn-live {
    background: var(--deep-red); color: #fff;
    box-shadow: 0 0 0 rgba(176,0,32,0.6);
    animation: livePulse 2s infinite;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(176,0,32,0.6); }
    70% { box-shadow: 0 0 0 16px rgba(176,0,32,0); }
    100% { box-shadow: 0 0 0 0 rgba(176,0,32,0); }
}
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* ============================================================
   Header / Navbar
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(58,6,12,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(246,196,83,0.3);
    transition: background .3s ease;
}
.topbar {
    background: var(--grad-maroon);
    color: var(--gold-soft);
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(246,196,83,0.15);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; flex-wrap: wrap; gap: 6px; }
.topbar a { color: var(--gold-soft); }
.topbar .socials { display: flex; gap: 14px; }
.topbar .socials a:hover { color: var(--gold-bright); }

.site-header { position: relative; z-index: 100; overflow-x: clip; }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 12px; position: relative; z-index: 102; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo-only { gap: 0; background: none; }
.brand-logo-img {
    object-fit: contain; flex-shrink: 0;
    background: transparent !important;
    border: none; box-shadow: none;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
}
.brand-logo-img--nav {
    height: 68px; width: auto; max-width: 220px;
}
.brand-logo-img--footer {
    height: clamp(110px, 14vw, 160px); width: auto; max-width: 320px;
    margin-bottom: 14px; display: block;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4));
}
.footer-brand { margin-bottom: 6px; }
.hero-logo-img {
    width: min(100%, 520px); height: auto; max-height: 240px;
    object-fit: contain; display: block; margin: 0 auto 18px;
    background: transparent; filter: drop-shadow(0 8px 28px rgba(0,0,0,0.45));
}
.hero-brand-block { max-width: 620px; margin-inline: auto; text-align: center; }
.hero-brand-block .lead { text-align: center; margin-inline: auto; }
.hero-brand-block .hero-actions { justify-content: center; }
.hero-brand-block .hero-stats { justify-content: center; }
.brand-logo {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--grad-gold);
    display: grid; place-items: center;
    font-family: var(--font-hindi);
    color: var(--maroon-dark); font-weight: 700; font-size: 1.4rem;
    box-shadow: var(--shadow-gold);
    border: 2px solid var(--gold-bright);
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
    0%,100% { box-shadow: 0 0 14px rgba(246,196,83,0.5); }
    50% { box-shadow: 0 0 28px rgba(255,216,107,0.85); }
}
.brand-text .name { font-family: var(--font-head); color: var(--gold-bright); font-weight: 700; font-size: 1.15rem; line-height: 1; letter-spacing: 0.5px; }
.brand-text .sub { color: var(--gold-soft); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links li { display: flex; align-items: center; }
.nav-links a {
    color: var(--cream); padding: 9px 12px; border-radius: 10px;
    font-size: 0.88rem; font-weight: 500; transition: all .25s ease; position: relative;
    white-space: nowrap; line-height: 1.1;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-bright); background: rgba(246,196,83,0.1); }
.nav-cta { margin-left: 6px; }
.nav-cta a { white-space: nowrap; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(246, 196, 83, 0.35);
    border-radius: 10px;
    background: rgba(246, 196, 83, 0.08);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gold-bright);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Floating spiritual effects
   ============================================================ */
.float-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.float-item { position: absolute; opacity: 0.85; will-change: transform; }
.diya { font-size: 1.8rem; animation: floatUp 14s linear infinite; filter: drop-shadow(0 0 12px rgba(255,170,0,0.8)); }
.flower { font-size: 1.5rem; animation: floatDown 16s linear infinite; }
.bell { font-size: 1.5rem; animation: swing 4s ease-in-out infinite; }
.sparkle { font-size: 1rem; animation: twinkle 3s ease-in-out infinite; }

@keyframes floatUp {
    0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    10% { opacity: .9; }
    90% { opacity: .9; }
    100% { transform: translateY(-15vh) rotate(360deg); opacity: 0; }
}
@keyframes floatDown {
    0% { transform: translateY(-15vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: .85; }
    90% { opacity: .85; }
    100% { transform: translateY(110vh) translateX(40px) rotate(180deg); opacity: 0; }
}
@keyframes swing { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes twinkle { 0%,100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } }

/* Light rays */
.light-rays {
    position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
    width: 120%; height: 140%;
    background: conic-gradient(from 0deg at 50% 0%,
        transparent 0deg, rgba(255,216,107,0.10) 8deg, transparent 16deg,
        transparent 24deg, rgba(255,216,107,0.08) 32deg, transparent 40deg,
        transparent 48deg, rgba(255,216,107,0.10) 56deg, transparent 64deg,
        transparent 72deg, rgba(255,216,107,0.07) 80deg, transparent 88deg);
    animation: rotateRays 60s linear infinite;
    pointer-events: none; z-index: 1;
}
@keyframes rotateRays { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex; align-items: center;
    background:
        var(--grad-hero),
        var(--hero-image, url('../images/ram-mandir.webp')) center/cover fixed;
    overflow: hidden;
    color: #fff;
}
.hero-inner { position: relative; z-index: 5; padding: 70px 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(246,196,83,0.15); border: 1px solid rgba(246,196,83,0.4);
    color: var(--gold-bright); padding: 8px 18px; border-radius: 50px; font-size: 0.82rem;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; backdrop-filter: blur(6px);
}
.hero h1 {
    font-family: var(--font-hindi);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.05; margin-bottom: 8px;
    background: linear-gradient(120deg, #ffd86b, #fff4d0, #f6c453);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 30px rgba(255,216,107,0.3);
}
.hero .hero-en { font-family: var(--font-head); font-size: clamp(1.2rem,2.5vw,1.8rem); color: var(--gold-soft); letter-spacing: 3px; margin-bottom: 18px; }
.hero p.lead { font-size: 1.08rem; color: rgba(255,255,255,0.9); max-width: 540px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats .stat .num { font-family: var(--font-head); font-size: 1.8rem; color: var(--gold-bright); font-weight: 700; }
.hero-stats .stat .lbl { font-size: 0.78rem; color: var(--gold-soft); text-transform: uppercase; letter-spacing: 1px; }

/* Hero live card */
.hero-live-card {
    background: rgba(58,6,12,0.6); border: 1px solid rgba(246,196,83,0.35);
    border-radius: var(--radius); padding: 16px; backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft); transform: perspective(1000px) rotateY(-6deg);
    transition: transform .5s ease;
}
.hero-live-card:hover { transform: perspective(1000px) rotateY(0deg); }
.hero-live-card .screen {
    position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
    background: #000 url('../images/ghats.jpg') center/cover;
    display: grid; place-items: center;
}
.hero-live-card .screen::after { content:''; position:absolute; inset:0; background: rgba(58,6,12,0.35); }
.live-tag {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    background: var(--deep-red); color:#fff; font-size:0.72rem; font-weight:700;
    padding: 5px 12px; border-radius: 6px; letter-spacing:1px; display:flex; align-items:center; gap:6px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background:#fff; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.hero-live-card .play-btn {
    position: relative; z-index: 3;
    display: grid; place-items: center;
    animation: livePulse 2s infinite;
    text-decoration: none;
}
.hero-live-card .meta { padding: 14px 8px 6px; }
.hero-live-card .meta .now { color: var(--gold-soft); font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; }
.hero-live-card .meta .prog { color:#fff; font-weight:600; font-size: 1.05rem; }

/* ============================================================
   Sections
   ============================================================ */
section { position: relative; }
.section { padding: 80px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.section-head .eyebrow {
    display:inline-block; color: var(--deep-red); font-weight:600; letter-spacing:3px;
    text-transform: uppercase; font-size: 0.8rem; margin-bottom: 10px;
}
.section-head h2 {
    font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--maroon); line-height: 1.15; margin-bottom: 12px;
}
.section-head h2 .gold { background: var(--grad-saffron); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.section-head p { color: #6b4a32; }
.divider-om { font-size: 1.6rem; color: var(--gold); margin: 6px 0; }

.bg-cream { background: var(--cream); }
.bg-maroon { background: var(--grad-maroon); color: #fff; }
.bg-maroon .section-head h2 { color: var(--gold-bright); }
.bg-maroon .section-head p { color: var(--gold-soft); }
.bg-pattern { background:
    linear-gradient(rgba(255,247,233,0.95), rgba(255,247,233,0.95)),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23e0a020' stroke-opacity='0.12'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   Cards (programs, videos, events)
   ============================================================ */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-soft); border: 1px solid rgba(224,160,32,0.15);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    transform-style: preserve-3d;
}
.card:hover { transform: translateY(-10px) rotateX(2deg); box-shadow: 0 24px 50px rgba(58,6,12,0.25); }
.card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--grad-maroon); }
.card .thumb img { width:100%; height:100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .thumb img { transform: scale(1.08); }
.card .thumb .cat {
    position:absolute; top:12px; left:12px; background: var(--grad-gold); color: var(--maroon-dark);
    font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius:50px;
}
.card .thumb .time {
    position:absolute; bottom:12px; right:12px; background: rgba(58,6,12,0.85); color: var(--gold-soft);
    font-size:0.74rem; padding:5px 11px; border-radius:6px;
}
.card .body { padding: 20px; }
.home-video-card .thumb { margin-bottom: 0; }
.home-video-body {
    padding: 18px 20px 22px !important;
    margin-top: 4px;
}
.home-video-body h3 {
    margin-bottom: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card .body h3 { font-family: var(--font-head); font-size: 1.15rem; color: var(--maroon); margin-bottom: 8px; }
.card .body p { font-size: 0.9rem; color: #6b4a32; }
.card:hover .play-overlay { opacity: 1; }
.card .play-overlay {
    position:absolute; inset:0; display:grid; place-items:center; background: rgba(58,6,12,0.35);
    opacity:0; transition: opacity .3s ease;
}

/* program icon card */
.prog-icon-card { text-align:center; padding: 34px 22px; }
.prog-icon-card .ic {
    width: 80px; height:80px; margin: 0 auto 18px; border-radius: 22px;
    background: var(--grad-saffron); display:grid; place-items:center; font-size: 2.2rem;
    box-shadow: 0 12px 26px rgba(255,106,0,0.35); transition: transform .4s ease;
}
.card:hover .prog-icon-card .ic { transform: rotateY(360deg); }

/* Event card */
.event-card { display:flex; gap:18px; align-items:flex-start; background:#fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-soft); border:1px solid rgba(224,160,32,0.15); transition: transform .3s ease; }
.event-card:hover { transform: translateX(6px); }
.event-date {
    flex-shrink:0; width: 72px; text-align:center; background: var(--grad-maroon); color: var(--gold-bright);
    border-radius: 14px; padding: 12px 6px;
}
.event-date .d { font-size: 1.6rem; font-family: var(--font-head); font-weight:700; line-height:1; }
.event-date .m { font-size: 0.72rem; text-transform: uppercase; letter-spacing:1px; }
.event-card h3 { font-family: var(--font-head); color: var(--maroon); font-size: 1.1rem; margin-bottom: 6px; }
.event-card .loc { color: var(--deep-red); font-size: 0.82rem; margin-bottom: 6px; }
.event-card p { font-size: 0.88rem; color:#6b4a32; }

/* ============================================================
   Live TV page
   ============================================================ */
.player-wrap { background: var(--grad-maroon); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); border: 1px solid rgba(246,196,83,0.3); }
.player-shell { position: relative; aspect-ratio: 16/9; width: 100%; min-height: 220px; border-radius: 12px; overflow:hidden; background:#000; }
.player-shell video { width:100%; height:100%; object-fit: contain; background:#000; display:block; }
.player-offline { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color: var(--gold-soft); padding: 20px; }
.player-bar { display:flex; align-items:center; justify-content:space-between; padding: 14px 8px 4px; flex-wrap:wrap; gap: 12px; }
.player-bar .now-playing { color:#fff; }
.player-bar .now-playing .lbl { color: var(--gold-soft); font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; }
.player-bar .now-playing .name { font-family: var(--font-head); font-size:1.1rem; }
.player-tools { display:flex; gap:10px; }
.icon-btn { width:42px; height:42px; border-radius:50%; border:1px solid rgba(246,196,83,0.4); background: rgba(246,196,83,0.12); color: var(--gold-bright); display:grid; place-items:center; cursor:pointer; transition: all .25s ease; font-size:1rem; }
.icon-btn:hover { background: var(--gold); color: var(--maroon-dark); }

/* Live TV page */
.live-section { padding-top: 40px; padding-bottom: 56px; }
.live-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 30px;
    align-items: start;
}
.live-player-col { min-width: 0; }
.live-epg-col { min-width: 0; }
.live-about-card {
    margin-top: 24px;
    background: #fff;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-soft);
}
.live-about-card h3 {
    font-family: var(--font-head);
    color: var(--maroon);
    margin-bottom: 8px;
}
.live-about-card p { color: #6b4a32; }
.live-epg-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.live-epg-head {
    background: var(--grad-maroon);
    color: var(--gold-bright);
    padding: 18px 20px;
    font-family: var(--font-head);
}
.live-epg-body { padding: 16px; }

/* Responsive split layouts (replaces inline grid styles) */
.page-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 36px; align-items: start; }
.videos-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; align-items: center; background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-soft); }

/* EPG */
.epg-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom: 26px; }
.epg-tab { padding: 9px 18px; border-radius: 50px; background:#fff; border:1px solid rgba(224,160,32,0.3); color: var(--maroon); cursor:pointer; font-size:0.85rem; font-weight:500; transition: all .25s ease; }
.epg-tab.active, .epg-tab:hover { background: var(--grad-gold); color: var(--maroon-dark); border-color: transparent; }
.epg-list { display:flex; flex-direction:column; gap:10px; }
.epg-row { display:flex; align-items:center; gap:18px; background:#fff; border-radius: 14px; padding: 14px 20px; box-shadow: var(--shadow-soft); border-left: 4px solid var(--gold); transition: transform .25s ease; }
.epg-row:hover { transform: translateX(6px); border-left-color: var(--deep-red); }
.epg-row.on-air { background: linear-gradient(90deg, rgba(246,196,83,0.18), #fff); border-left-color: var(--deep-red); }
.epg-time { flex-shrink:0; width: 150px; color: var(--deep-red); font-weight:600; font-size:0.9rem; }
.epg-info h4 { font-family: var(--font-head); color: var(--maroon); font-size:1rem; }
.epg-info p { font-size:0.82rem; color:#6b4a32; }
.epg-badge { margin-left:auto; background: var(--deep-red); color:#fff; font-size:0.7rem; padding:4px 10px; border-radius:50px; font-weight:600; }

/* ============================================================
   Filters / chips
   ============================================================ */
.chips { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom: 36px; }
.chip { padding: 9px 20px; border-radius:50px; background:#fff; border:1px solid rgba(224,160,32,0.3); color: var(--maroon); font-size:0.85rem; font-weight:500; transition: all .25s ease; cursor:pointer; }
.chip:hover, .chip.active { background: var(--grad-saffron); color:#fff; border-color: transparent; transform: translateY(-2px); }

/* ============================================================
   Tables (distribution)
   ============================================================ */
.table-wrap { overflow-x:auto; border-radius: var(--radius); box-shadow: var(--shadow-soft); background:#fff; }
table.data { width:100%; border-collapse: collapse; min-width: 720px; }
table.data thead { background: var(--grad-maroon); color: var(--gold-bright); }
table.data th { text-align:left; padding: 16px 18px; font-family: var(--font-head); font-size:0.85rem; letter-spacing:0.5px; }
table.data td { padding: 14px 18px; border-bottom: 1px solid rgba(224,160,32,0.15); font-size:0.9rem; color: var(--ink); }
table.data tbody tr:hover { background: rgba(246,196,83,0.08); }
.status-pill { display:inline-block; padding:4px 12px; border-radius:50px; font-size:0.75rem; font-weight:600; }
.status-active, .status-Active, .status-Approved { background: #e3f7e8; color:#1b7a3d; }
.status-inactive, .status-Inactive, .status-Rejected { background:#fde4e4; color: var(--deep-red); }
.status-New { background:#e7f0ff; color:#1559c7; }
.status-Contacted, .status-Read { background:#fff3d6; color:#9a6a00; }

/* ============================================================
   Forms
   ============================================================ */
.form-card { background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 36px; border:1px solid rgba(224,160,32,0.15); }
.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size:0.85rem; font-weight:600; color: var(--maroon); }
.form-group label .req { color: var(--deep-red); }
.form-control {
    padding: 12px 16px; border-radius: 12px; border: 1.5px solid rgba(224,160,32,0.3);
    background: var(--cream); font-family: var(--font-body); font-size:0.95rem; color: var(--ink);
    transition: border-color .25s ease, box-shadow .25s ease; width:100%;
}
.form-control:focus { outline:none; border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255,138,0,0.12); background:#fff; }
textarea.form-control { resize: vertical; min-height: 120px; }
.file-drop {
    border: 2px dashed rgba(224,160,32,0.5); border-radius: 12px; padding: 24px; text-align:center;
    background: var(--cream); cursor:pointer; transition: all .25s ease; color:#6b4a32; font-size:0.88rem;
}
.file-drop:hover { border-color: var(--saffron); background:#fff; }
.form-error { color: var(--deep-red); font-size:0.8rem; }
.alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-size:0.92rem; }
.alert-success { background:#e3f7e8; color:#1b7a3d; border:1px solid #9fd9b0; }
.alert-error { background:#fde4e4; color: var(--deep-red); border:1px solid #f3b0b0; }

/* ============================================================
   Advertise page extras
   ============================================================ */
.feature-list { list-style:none; display:grid; gap:14px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; background:#fff; padding:16px 18px; border-radius:14px; box-shadow: var(--shadow-soft); border-left:4px solid var(--gold); }
.feature-list li .fi { color: var(--deep-red); font-size:1.2rem; flex-shrink:0; font-weight:800; }

/* Showcase image grid (services / advertise) */
.showcase-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.showcase-item { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); aspect-ratio:4/3; }
.showcase-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.showcase-item:hover img { transform:scale(1.06); }
.showcase-item span {
    position:absolute; left:0; right:0; bottom:0; padding:16px 14px 12px; color:#fff;
    font-family:var(--font-head); font-weight:700; text-align:center;
    background:linear-gradient(to top, rgba(58,6,12,0.9), transparent);
}
.rate-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.rate-card { text-align:center; background:#fff; border-radius: var(--radius); padding: 30px 22px; box-shadow: var(--shadow-soft); border:1px solid rgba(224,160,32,0.2); transition: transform .35s ease; position:relative; }
.rate-card:hover { transform: translateY(-8px); }
.rate-card.featured { background: var(--grad-maroon); color:#fff; transform: scale(1.04); }
.rate-card.featured .price, .rate-card.featured h3 { color: var(--gold-bright); }
.rate-card h3 { font-family: var(--font-head); color: var(--maroon); margin-bottom:8px; }
.rate-card .price { font-family: var(--font-head); font-size:2rem; color: var(--deep-red); margin-bottom: 6px; }
.rate-card .per { font-size:0.78rem; opacity:0.8; margin-bottom: 16px; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid { columns: 4; column-gap: 16px; }
.gallery-grid .g-item { break-inside: avoid; margin-bottom: 16px; border-radius: 14px; overflow:hidden; box-shadow: var(--shadow-soft); position:relative; cursor:pointer; }
.gallery-grid .g-item img { width:100%; transition: transform .5s ease; }
.gallery-grid .g-item:hover img { transform: scale(1.07); }
.gallery-grid .g-item .cap { position:absolute; inset:auto 0 0 0; padding: 24px 14px 12px; background: linear-gradient(transparent, rgba(58,6,12,0.85)); color: var(--gold-soft); font-size:0.82rem; opacity:0; transition: opacity .3s ease; }
.gallery-grid .g-item:hover .cap { opacity: 1; }

/* Lightbox */
.lightbox { position:fixed; inset:0; background: rgba(20,2,5,0.94); z-index: 2000; display:none; place-items:center; padding: 30px; }
.lightbox.open { display:grid; }
.lightbox img { max-width: 90%; max-height: 88vh; border-radius: 10px; box-shadow: 0 0 60px rgba(246,196,83,0.3); }
.lightbox .close { position:absolute; top:24px; right:30px; color: var(--gold-bright); font-size:2.4rem; cursor:pointer; }

/* ============================================================
   Page hero (sub pages)
   ============================================================ */
.page-hero {
    position: relative; padding: 80px 0 70px; text-align:center; color:#fff; overflow:hidden;
    background: var(--maroon-dark);
}
.page-hero::before {
    content: ''; position: absolute; inset: -20px;
    background: url('../images/ram-mandir.webp') center/cover no-repeat;
    z-index: 0; transform: scale(1.05);
    animation: heroKenBurns 22s ease-in-out infinite alternate;
    will-change: transform;
}
.page-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(rgba(58,6,12,0.72), rgba(92,10,20,0.6));
}
.page-hero > * { position: relative; z-index: 5; }
@keyframes heroKenBurns {
    0%   { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.18) translate(-2%, -2%); }
}
.page-hero h1 { font-family: var(--font-hindi); font-size: clamp(2rem, 5vw, 3.4rem); color: var(--gold-bright); margin-bottom: 8px; position:relative; z-index:5; }
.page-hero p { color: var(--gold-soft); position:relative; z-index:5; }
.breadcrumb { position:relative; z-index:5; margin-top:14px; font-size:0.85rem; color: var(--gold-soft); }
.breadcrumb a:hover { color: var(--gold-bright); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
    background: var(--grad-saffron); color:#fff; text-align:center; padding: 60px 0; position:relative; overflow:hidden;
}
.cta-band h2 { font-family: var(--font-head); font-size: clamp(1.6rem,3.5vw,2.4rem); margin-bottom: 12px; }
.cta-band p { max-width: 600px; margin: 0 auto 26px; opacity:0.95; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--maroon-dark); color: var(--gold-soft); padding: 60px 0 0; position:relative; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 40px; }
.site-footer h4 { font-family: var(--font-head); color: var(--gold-bright); margin-bottom: 18px; font-size: 1.05rem; }
.site-footer p { font-size: 0.9rem; opacity:0.85; margin-bottom: 10px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap: 10px; }
.footer-links a { font-size:0.9rem; opacity:0.85; transition: all .2s ease; }
.footer-links a:hover { color: var(--gold-bright); opacity:1; padding-left: 5px; }
.footer-social { display:flex; gap:12px; margin-top: 8px; }
.footer-social a { width: 40px; height:40px; border-radius:50%; background: rgba(246,196,83,0.12); border:1px solid rgba(246,196,83,0.3); display:grid; place-items:center; color: var(--gold-bright); transition: all .25s ease; }
.footer-social .social-icon-svg { width: 18px; height: 18px; display: block; }
.footer-social a.social-fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.footer-social a.social-yt:hover { background: #FF0000; color: #fff; border-color: #FF0000; }
.footer-social a.social-ig:hover { background: #E4405F; color: #fff; border-color: #E4405F; }
.footer-social a.social-tw:hover { background: #000; color: #fff; border-color: #000; }
.footer-social a.social-wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.footer-social a:hover { background: var(--gold); color: var(--maroon-dark); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(246,196,83,0.15); padding: 20px 0; text-align:center; font-size:0.82rem; opacity:0.7; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal { opacity:0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform: translateY(0); }

/* ============================================================
   Astrology page
   ============================================================ */
.astro-hero {
    background:
        linear-gradient(160deg, rgba(40,4,40,0.82) 0%, rgba(92,10,20,0.76) 55%, rgba(123,47,247,0.4) 100%),
        url('../images/astrology-open-book.webp') center/cover;
    min-height: 480px;
    display: grid;
    place-items: center;
}
.astro-hero-center {
    position: relative;
    display: grid;
    place-items: center;
    z-index: 5;
}
.astro-hero-text {
    position: relative;
    z-index: 6;
    text-align: center;
    padding: 28px 40px;
}
.astro-hero-text::before {
    content: '';
    position: absolute;
    inset: 50% 50%;
    width: 130%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(20,2,20,0.78) 0%, rgba(20,2,20,0.5) 45%, transparent 72%);
    z-index: -1;
    border-radius: 50%;
}
.astro-hero-text h1 {
    font-family: var(--font-hindi);
    font-size: clamp(2.6rem, 7vw, 5rem);
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 30px rgba(123,47,247,0.6);
}
.astro-hero-text p {
    color: var(--gold-bright);
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.astro-hero-text .breadcrumb { color: #f7e9c8; }
.astro-hero-text .breadcrumb a { color: var(--gold-bright); }
.zodiac-ring {
    position:absolute; top:50%; left:50%; width:520px; height:520px; margin:-260px 0 0 -260px;
    border-radius:50%; border:1px dashed rgba(246,196,83,0.35);
    animation: zodiacClockSpin 50s linear infinite; pointer-events:none; z-index:1; opacity:0.5;
}
.zodiac-ring span {
    position:absolute; top:50%; left:50%; font-size:1.5rem; color:var(--gold-bright);
    text-shadow:0 0 12px rgba(255,216,107,0.8);
}
.zodiac-ring span:nth-child(1){ transform: rotate(0deg) translateY(-258px); }
.zodiac-ring span:nth-child(2){ transform: rotate(30deg) translateY(-258px); }
.zodiac-ring span:nth-child(3){ transform: rotate(60deg) translateY(-258px); }
.zodiac-ring span:nth-child(4){ transform: rotate(90deg) translateY(-258px); }
.zodiac-ring span:nth-child(5){ transform: rotate(120deg) translateY(-258px); }
.zodiac-ring span:nth-child(6){ transform: rotate(150deg) translateY(-258px); }
.zodiac-ring span:nth-child(7){ transform: rotate(180deg) translateY(-258px); }
.zodiac-ring span:nth-child(8){ transform: rotate(210deg) translateY(-258px); }
.zodiac-ring span:nth-child(9){ transform: rotate(240deg) translateY(-258px); }
.zodiac-ring span:nth-child(10){ transform: rotate(270deg) translateY(-258px); }
.zodiac-ring span:nth-child(11){ transform: rotate(300deg) translateY(-258px); }
.zodiac-ring span:nth-child(12){ transform: rotate(330deg) translateY(-258px); }
.astro-hero-wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: clamp(300px, 40vw, 460px);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 10px;
    background: radial-gradient(circle, rgba(255,216,107,0.5), rgba(92,10,20,0.35) 70%, transparent);
    box-shadow: 0 0 60px rgba(255,216,107,0.5), 0 0 120px rgba(123,47,247,0.35);
    pointer-events: none;
}
.astro-hero-wheel img,
.rotating-zodiac-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.9;
    animation: zodiacClockSpin 34s linear infinite;
}
@keyframes zodiacClockSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.astro-action { display:block; }
.rashi-card { padding:20px; }
.rashi-top { display:flex; align-items:center; gap:12px; }
.rashi-sym {
    width:48px; height:48px; flex-shrink:0; border-radius:14px; display:grid; place-items:center;
    background:linear-gradient(135deg, #7b2ff7, #b00020); color:#fff; font-size:1.5rem;
    box-shadow:0 8px 18px rgba(123,47,247,0.35);
}

.home-astro-section {
    overflow: hidden;
}
.astro-visual-card {
    position: relative;
    min-height: 380px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(246,196,83,0.32);
    box-shadow: 0 28px 70px rgba(0,0,0,0.35);
    background: var(--grad-maroon);
}
.astro-book-img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.04);
}
.astro-visual-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(58,6,12,0.08), rgba(58,6,12,0.55));
    pointer-events: none;
}
.astro-wheel-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: min(52%, 230px);
    aspect-ratio: 1;
    transform: translate(-50%, -54%);
    border-radius: 50%;
    padding: 8px;
    background: radial-gradient(circle, rgba(255,255,255,0.82), rgba(255,216,107,0.38) 58%, rgba(92,10,20,0.9));
    box-shadow: 0 0 44px rgba(255,216,107,0.62), 0 18px 38px rgba(0,0,0,0.38);
}
.astro-mini-services {
    position: absolute;
    z-index: 4;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.astro-mini-services a {
    border-radius: 12px;
    padding: 11px 12px;
    background: rgba(255,255,255,0.92);
    color: var(--maroon);
    font-weight: 700;
    font-size: 0.84rem;
    text-align: center;
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
    transition: transform .25s ease, background .25s ease;
}
.astro-mini-services a:hover {
    transform: translateY(-3px);
    background: var(--gold-bright);
}

/* ============================================================
   Enhanced 3D effects & animations
   ============================================================ */
/* JS-driven tilt cards */
.tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.tilt > * { transform: translateZ(20px); }

/* Shine sweep on cards */
.card { position: relative; }
.card::after {
    content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg); transition: left .7s ease; pointer-events:none; z-index:3;
}
.card:hover::after { left: 130%; }

/* Hero live card extra glow + float */
.hero-live-card { animation: cardFloat 6s ease-in-out infinite; }
@keyframes cardFloat {
    0%,100% { transform: perspective(1000px) rotateY(-6deg) translateY(0); }
    50% { transform: perspective(1000px) rotateY(-6deg) translateY(-14px); }
}
.hero-live-card .screen { box-shadow: 0 0 0 rgba(246,196,83,0); animation: screenGlow 4s ease-in-out infinite; }
@keyframes screenGlow {
    0%,100% { box-shadow: 0 0 30px rgba(246,196,83,0.25); }
    50% { box-shadow: 0 0 55px rgba(255,216,107,0.55); }
}

/* Animated conic glow behind hero heading */
.hero h1 { position: relative; }

/* Brand logo gentle 3D rotate on hover */
.brand-logo-img--nav { transition: transform .35s ease; }
.brand:hover .brand-logo-img--nav { transform: scale(1.04); }

/* Gold gradient animated buttons */
.btn-gold { background-size: 200% auto; }
.btn-gold:hover { background-position: right center; }

/* Floating CTA - WhatsApp/Astrology quick buttons */
.float-cta {
    position: fixed; right: 18px; bottom: 18px; z-index: 120; display:flex; flex-direction:column; gap:12px;
}
.float-cta a {
    width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
    box-shadow: var(--shadow-soft); color:#fff; transition: transform .25s ease;
    animation: livePulse 2.5s infinite;
}
.float-cta a:hover { transform: scale(1.12); }
.float-cta .fc-astro { background: linear-gradient(135deg,#7b2ff7,#b00020); }
.float-cta .fc-astro .fc-emoji { font-size: 1.6rem; line-height: 1; }
.float-cta .fc-wa { background: #25d366; }
.float-cta .fc-wa svg { width: 28px; height: 28px; }
.float-cta .fc-live { background: var(--deep-red); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3,1fr); }
    .gallery-grid { columns: 3; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-live-card { max-width: 480px; margin-inline: auto; }
    .live-page-grid { grid-template-columns: 1fr; }
    .page-split-grid,
    .videos-hero-grid { grid-template-columns: 1fr; }
    .nav-links {
        position: fixed; top: 0; right: -100%; width: min(86vw, 330px); height: 100vh;
        background: var(--grad-maroon); flex-direction: column; align-items: flex-start;
        padding: 88px 22px 28px; gap: 6px; transition: right .35s ease; box-shadow: -10px 0 40px rgba(0,0,0,0.4); z-index: 200;
        overflow-y: auto;
    }
    .nav-links.open { right: 0; }
    .nav-links li { width: 100%; }
    .nav-links a { width:100%; font-size: 0.98rem; padding: 12px 14px; }
    .nav-cta { margin-left: 0; margin-top: 8px; width: 100%; }
    .nav-cta a { display: inline-flex; }
    .nav-toggle { display: flex; z-index: 201; }
    .brand-logo-img--nav { height: 56px; max-width: 180px; }
}
@media (max-width: 768px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .rate-cards { grid-template-columns: 1fr; }
    .rate-card.featured { transform: none; }
    .gallery-grid { columns: 2; }
    .hero { background-attachment: scroll; min-height: auto; }
    .hero-inner { padding: 48px 0; text-align: center; }
    .hero-brand-block { margin-inline: auto; }
    .hero-brand-block .lead { text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-logo-img {
        margin-inline: auto;
        max-height: 170px;
        width: min(88vw, 340px);
    }
    .section { padding: 56px 0; }
    .live-section { padding-top: 28px; padding-bottom: 40px; }
    .player-wrap { padding: 10px; border-radius: 12px; }
    .player-shell { min-height: min(52vw, 280px); border-radius: 8px; }
    .player-bar { padding: 12px 4px 2px; }
    .player-bar .now-playing .name { font-size: 0.95rem; }
    .page-hero { padding: 52px 0 40px; }
    .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
    .float-cta { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
    .float-cta a { width: 48px; height: 48px; }
    .topbar .container { justify-content:center; }
    .topbar .topbar-info { display:none; }
    .topbar-social { justify-content: center; }
    .topbar-social .social-chip span { display: none; }
    .topbar-social .social-chip {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
    .brand-logo-img--footer {
        height: 88px;
        max-width: 220px;
        margin-inline: auto;
    }
    .site-footer .footer-grid > div:first-child { text-align: center; }
    .footer-social { justify-content: center; }
    .navbar { padding: 10px 0; }
    .brand { min-width: 0; flex: 1; }
    .brand-logo-img--nav { height: 50px; max-width: 150px; }
    .astro-hero {
        min-height: 380px;
    }
    .astro-hero-wheel {
        width: clamp(240px, 78vw, 320px);
    }
    .zodiac-ring {
        width: 360px;
        height: 360px;
        margin: -180px 0 0 -180px;
    }
    .zodiac-ring span:nth-child(n) {
        transform-origin: 0 0;
    }
    .astro-visual-card,
    .astro-book-img {
        min-height: 340px;
    }
    .astro-wheel-wrap {
        width: 170px;
        transform: translate(-50%, -62%);
    }
}
@media (max-width: 480px) {
    .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
    .gallery-grid { columns: 1; }
    .hero-stats { gap: 18px; }
    .btn { padding: 12px 22px; font-size: 0.9rem; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom { font-size: 0.75rem; padding: 16px 0; }
    .container { width: min(1200px, 94%); }
    .live-page-grid { gap: 20px; }
    .player-shell { min-height: 52vw; }
    .player-wrap { margin-inline: -4px; }
    .live-about-card,
    .live-epg-card { padding: 0; }
    .live-about-card { padding: 18px; }
    .videos-hero-grid { padding: 14px; gap: 18px; }
    .page-split-grid { gap: 24px; }
    .astro-mini-services {
        grid-template-columns: 1fr;
    }
    .astro-mini-services a {
        padding: 9px 10px;
        font-size: 0.8rem;
    }
}

/* SD Sangam — client updates */
.card p, .feature-list div, .event-card p, .service-card p, .news-article-content p {
    text-align: justify;
}
.page-hero p, .section-head p, .lead, .footer-grid > div > p {
    text-align: center;
}
.nav-news-highlight {
    background: var(--deep-red) !important; color: #fff !important;
    border-radius: 6px; padding: 8px 14px !important; font-weight: 700 !important;
}
.nav-news-highlight:hover, .nav-news-highlight.active {
    background: var(--maroon) !important; color: var(--gold-bright) !important;
}
.social-links-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topbar-social .social-chip {
    font-size: 0.72rem; padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.12); color: #fff; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.topbar-social .social-chip .social-icon-svg { width: 14px; height: 14px; display: block; flex-shrink: 0; }
.topbar-social .social-chip:hover { background: rgba(255,255,255,0.22); }
.topbar-links { display: flex; align-items: center; gap: 18px; }
.topbar-social-link {
    font-size: 0.74rem; color: var(--gold-bright); text-decoration: none;
    font-weight: 700; white-space: nowrap;
}
.topbar-social-link:hover { color: #fff; }

/* Home Social Media section */
.social-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px; max-width: 900px; margin: 0 auto;
}
.social-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 26px 16px; border-radius: var(--radius); text-decoration: none;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(246,196,83,0.3);
    color: #fff; transition: transform .25s ease, background .25s ease, border-color .25s ease;
    text-align: center;
}
.social-tile:hover { transform: translateY(-6px); background: rgba(255,255,255,0.12); border-color: var(--gold-bright); }
.social-tile-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); }
.social-tile-ic .social-icon-svg { width: 24px; height: 24px; color: var(--maroon-dark); }
.social-tile strong { font-size: 0.98rem; color: var(--gold-bright); }
.social-tile-cta { font-size: 0.76rem; color: var(--gold-soft); text-transform: uppercase; letter-spacing: 1px; }
.social-tile { cursor: pointer; }
.social-tile.active { background: rgba(255,255,255,0.16); border-color: var(--gold-bright); transform: translateY(-4px); }

/* Expandable accounts panel */
.social-accounts-panel {
    max-width: 900px; margin: 18px auto 0; padding: 22px;
    border-radius: var(--radius); background: rgba(0,0,0,0.22);
    border: 1px solid rgba(246,196,83,0.3);
}
.social-panel-title { text-align: center; color: var(--gold-bright); font-family: var(--font-head); margin-bottom: 16px; }
.social-accounts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.social-account-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: 12px; text-decoration: none; color: #fff;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(246,196,83,0.25);
    transition: background .2s ease, transform .2s ease;
}
.social-account-item:hover { background: rgba(255,255,255,0.16); transform: translateX(4px); }
.social-account-logo {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center; overflow: hidden; background: var(--grad-gold);
}
.social-account-logo img { width: 100%; height: 100%; object-fit: cover; }
.social-account-logo .social-icon-svg { width: 22px; height: 22px; color: var(--maroon-dark); }
.social-account-name { flex: 1; font-weight: 700; color: var(--gold-bright); font-size: 0.95rem; }
.social-account-go { font-size: 0.75rem; color: var(--gold-soft); white-space: nowrap; }
.page-hero {
    padding: 72px 0 48px; text-align: center;
    color: var(--gold-soft);
    background: transparent;
}
.page-hero h1 { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3rem); color: #fff; margin: 10px 0; }
.services-grid { gap: 24px; }
.service-card { padding: 28px 24px; }
.service-icon { font-size: 2.4rem; margin-bottom: 12px; }
.service-card h2 { font-family: var(--font-head); color: var(--maroon); margin-bottom: 10px; font-size: 1.35rem; }
.feature-list.compact li { margin-bottom: 8px; }