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

html {
    scroll-behavior: smooth;
}

body {
    background: #120d08;
    color: #ead9b5;
    font-family: "Libre Baskerville", serif;
    overflow-x: hidden;
}


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

.navbar {
    min-height: 80px;
    padding: 0 6%;

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

    background: rgba(15, 10, 6, 0.97);
    border-bottom: 1px solid #6e5632;

    position: relative;
    z-index: 100;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-name {
    font-family: "Cinzel", serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: #b9985a;
}

.project-name {
    font-family: "Cinzel", serif;
    font-size: 17px;
    letter-spacing: 2px;
    color: #e0c88f;
}

.navbar nav {
    display: flex;
    gap: 27px;
}

.navbar nav a {
    color: #bba984;
    text-decoration: none;

    font-family: "Cinzel", serif;
    font-size: 12px;
    letter-spacing: 1px;

    transition: 0.3s ease;
}

.navbar nav a:hover {
    color: #e0bd6c;
}


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

.hindu-hero {
    min-height: 760px;

    position: relative;

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

    text-align: center;

    background:
        linear-gradient(
            rgba(19, 10, 4, 0.52),
            rgba(12, 7, 3, 0.93)
        ),
        url("https://www.shutterstock.com/search/hindu-god");

    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 15%,
            rgba(0, 0, 0, 0.7) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
    padding: 40px;

    animation: heroReveal 1.6s ease forwards;
}

@keyframes heroReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.hero-label {
    font-family: "Cinzel", serif;

    font-size: 12px;
    letter-spacing: 5px;

    color: #c7a45d;

    margin-bottom: 30px;
}

.om-symbol {
    font-size: 100px;

    color: #d6ad5b;

    text-shadow:
        0 0 15px rgba(214, 173, 91, 0.35),
        0 0 45px rgba(214, 173, 91, 0.15);

    animation:
        symbolReveal 1.5s ease,
        symbolPulse 4s ease-in-out infinite 1.5s;
}

@keyframes symbolReveal {

    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes symbolPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

}

.hero-content h1 {
    margin-top: 5px;

    font-family: "Cinzel", serif;

    font-size: clamp(55px, 9vw, 105px);

    letter-spacing: 9px;

    color: #f0dfb8;

    text-shadow:
        0 5px 30px rgba(0, 0, 0, 0.9);

    animation: titleReveal 1.4s ease;
}

@keyframes titleReveal {

    from {
        opacity: 0;
        letter-spacing: 25px;
    }

    to {
        opacity: 1;
        letter-spacing: 9px;
    }

}

.hero-ornament {
    margin: 28px 0;

    color: #b28a49;

    font-size: 18px;
}

.hero-description {
    max-width: 700px;

    margin: auto;

    color: #d3c19b;

    font-size: 16px;

    line-height: 1.9;
}

.hero-button {
    display: inline-block;

    margin-top: 35px;

    padding: 15px 32px;

    border: 1px solid #b08a4d;

    color: #e3c67e;

    text-decoration: none;

    font-family: "Cinzel", serif;

    font-size: 12px;

    letter-spacing: 2px;

    transition: 0.35s ease;
}

.hero-button:hover {
    background: #b08a4d;

    color: #160f08;

    box-shadow:
        0 0 25px rgba(176, 138, 77, 0.25);

    transform: translateY(-3px);
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

section {
    position: relative;
}

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

    margin: 0 auto 65px;

    text-align: center;
}

.section-label {
    font-family: "Cinzel", serif;

    font-size: 11px;

    letter-spacing: 4px;

    color: #b08a4d;
}

.section-heading h2 {
    margin-top: 15px;

    font-family: "Cinzel", serif;

    font-size: clamp(32px, 5vw, 50px);

    color: #dfc99d;
}

.section-ornament {
    margin-top: 20px;

    color: #b08a4d;

    font-size: 18px;
}

.section-heading > p:last-child {
    margin-top: 18px;

    color: #928269;

    line-height: 1.8;

    font-size: 14px;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.intro-section {
    padding: 115px 8% 100px;

    background:
        linear-gradient(
            180deg,
            #171009,
            #110c07
        );

    border-bottom: 1px solid #493921;
}

.intro-content {
    max-width: 850px;

    margin: auto;

    text-align: center;
}

.intro-content p {
    margin-bottom: 22px;

    color: #b8a98a;

    font-size: 15px;

    line-height: 2;
}


/* =========================================================
   HISTORICAL DEVELOPMENT
========================================================= */

.history-section {
    padding: 115px 7%;

    background: #0e0a06;
}

.history-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}

.history-card {
    padding: 32px 28px;

    background:
        linear-gradient(
            145deg,
            #21160d,
            #171008
        );

    border: 1px solid #4c3923;

    transition: 0.35s ease;
}

.history-card:hover {
    transform: translateY(-7px);

    border-color: #a47b40;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.4);
}

.history-period {
    color: #b18a4e;

    font-family: "Cinzel", serif;

    font-size: 10px;

    letter-spacing: 1px;
}

.history-card h3 {
    margin: 13px 0;

    font-family: "Cinzel", serif;

    font-size: 21px;

    color: #d8bd82;
}

.history-card p {
    color: #9f9279;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   SACRED TEXTS
========================================================= */

.texts-section {
    padding: 120px 7%;

    background:
        linear-gradient(
            180deg,
            #171009,
            #21150c
        );
}

.texts-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

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

    gap: 22px;
}

.text-card {
    min-height: 230px;

    padding: 32px;

    background: rgba(25, 16, 8, 0.9);

    border: 1px solid #544027;

    position: relative;

    transition: 0.35s ease;
}

.text-card::before {
    content: "✦";

    position: absolute;

    top: 15px;
    right: 18px;

    color: #8f6d3c;

    font-size: 12px;
}

.text-card:hover {
    transform: translateY(-6px);

    border-color: #b08a4d;
}

.text-card h3 {
    margin-bottom: 18px;

    font-family: "Cinzel", serif;

    font-size: 21px;

    color: #d5b978;
}

.text-card p {
    color: #a4977e;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   DIVINITY
========================================================= */

.divinity-section {
    padding: 120px 7%;

    background: #0d0906;
}

.divinity-content {
    max-width: 1050px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.divinity-content article {
    padding: 35px;

    text-align: center;

    background: #1c120a;

    border-top: 2px solid #876434;

    border-bottom: 1px solid #493721;
}

.divinity-content h3 {
    margin-bottom: 17px;

    font-family: "Cinzel", serif;

    color: #d7b86f;

    font-size: 22px;
}

.divinity-content p {
    color: #9e9279;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   CORE CONCEPTS
========================================================= */

.concepts-section {
    padding: 120px 7%;

    background:
        radial-gradient(
            circle at center,
            #24170b,
            #0d0905 70%
        );
}

.concept-grid {
    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.concept-grid article {
    padding: 38px 30px;

    background: #191007;

    border: 1px solid #513d26;

    text-align: center;
}

.concept-grid span {
    font-family: "Cinzel", serif;

    font-size: 10px;

    letter-spacing: 4px;

    color: #a77d42;
}

.concept-grid h3 {
    margin: 15px 0;

    font-family: "Cinzel", serif;

    color: #d8bd82;

    font-size: 21px;
}

.concept-grid p {
    color: #9e9279;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   MOKSHA
========================================================= */

.moksha-section {
    padding: 120px 7%;

    background: #120c07;
}

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

    margin: auto;

    text-align: center;
}

.moksha-content > p {
    color: #aaa087;

    line-height: 2;

    font-size: 15px;

    margin-bottom: 45px;
}

.paths-grid {
    display: grid;

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

    gap: 18px;
}

.paths-grid article {
    padding: 28px 20px;

    background: #20140a;

    border: 1px solid #4f3a24;
}

.paths-grid h3 {
    margin-bottom: 12px;

    font-family: "Cinzel", serif;

    color: #d1b371;

    font-size: 17px;
}

.paths-grid p {
    color: #968b76;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   SHAIVISM & VAISHNAVISM
========================================================= */

.tradition-section {
    padding: 125px 7%;
}

.shaivism-section {
    background:
        linear-gradient(
            135deg,
            #120c07,
            #201308
        );
}

.vaishnavism-section {
    background:
        linear-gradient(
            135deg,
            #0d0a07,
            #17150c
        );

    border-top: 1px solid #493921;
}

.tradition-content {
    max-width: 1100px;

    margin: auto;
}

.tradition-main {
    max-width: 850px;

    margin: 0 auto 45px;

    padding: 35px;

    text-align: center;

    background: rgba(25, 16, 8, 0.7);

    border: 1px solid #5b4429;
}

.tradition-main h3 {
    margin-bottom: 15px;

    font-family: "Cinzel", serif;

    font-size: 25px;

    color: #d7b86f;
}

.tradition-main p {
    color: #a99a7d;

    font-size: 14px;

    line-height: 2;
}

.tradition-cards {
    display: grid;

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

    gap: 18px;
}

.tradition-cards article {
    padding: 28px 22px;

    background: #1b1108;

    border: 1px solid #4e3a24;

    transition: 0.3s ease;
}

.tradition-cards article:hover {
    transform: translateY(-5px);

    border-color: #aa8045;
}

.tradition-cards h3 {
    margin-bottom: 13px;

    font-family: "Cinzel", serif;

    color: #d0b36f;

    font-size: 17px;
}

.tradition-cards p {
    color: #978b75;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   MURUGAN
========================================================= */

.murugan-section {
    padding: 130px 7%;

    background:
        linear-gradient(
            rgba(22, 10, 4, 0.9),
            rgba(12, 7, 3, 0.97)
        ),
        url("https://images.unsplash.com/photo-1609766857041-ed402ea8069a?auto=format&fit=crop&w=2000&q=80");

    background-size: cover;

    background-position: center;
}

.murugan-section .section-heading h2 {
    font-size: clamp(40px, 6vw, 65px);
}

.murugan-content {
    max-width: 1100px;

    margin: auto;
}

.murugan-introduction {
    max-width: 850px;

    margin: auto auto 50px;

    text-align: center;
}

.murugan-introduction h3 {
    font-family: "Cinzel", serif;

    color: #d7b86f;

    font-size: 25px;

    margin-bottom: 20px;
}

.murugan-introduction p {
    color: #b2a185;

    font-size: 14px;

    line-height: 2;

    margin-bottom: 16px;
}

.murugan-grid {
    display: grid;

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

    gap: 22px;
}

.murugan-grid article {
    padding: 35px;

    background:
        rgba(20, 10, 4, 0.88);

    border: 1px solid #654a2a;

    transition: 0.35s ease;
}

.murugan-grid article:hover {
    transform: translateY(-6px);

    border-color: #b28749;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.45);
}

.murugan-grid h3 {
    font-family: "Cinzel", serif;

    color: #d7b86f;

    font-size: 20px;

    margin-bottom: 15px;
}

.murugan-grid p {
    color: #a79a80;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   FESTIVALS
========================================================= */

.festivals-section {
    padding: 120px 7%;

    background: #110c07;
}

.festival-grid {
    max-width: 1150px;

    margin: auto;

    display: grid;

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

    gap: 20px;
}

.festival-grid article {
    padding: 30px;

    background: #1c1209;

    border: 1px solid #4c3924;

    transition: 0.3s ease;
}

.festival-grid article:hover {
    border-color: #a57b42;

    transform: translateY(-5px);
}

.festival-grid h3 {
    font-family: "Cinzel", serif;

    color: #d4b875;

    margin-bottom: 14px;

    font-size: 19px;
}

.festival-grid p {
    color: #988d77;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   ARCHITECTURE
========================================================= */

.architecture-section {
    padding: 120px 7%;

    background:
        linear-gradient(
            180deg,
            #1a1109,
            #0c0805
        );
}

.architecture-content {
    max-width: 1000px;

    margin: auto;

    text-align: center;
}

.architecture-content > p {
    max-width: 800px;

    margin: 0 auto 45px;

    color: #a99c82;

    font-size: 14px;

    line-height: 2;
}

.architecture-grid {
    display: grid;

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

    gap: 18px;
}

.architecture-grid article {
    padding: 28px 20px;

    background: #191008;

    border: 1px solid #4d3923;
}

.architecture-grid h3 {
    font-family: "Cinzel", serif;

    color: #d4b574;

    font-size: 17px;

    margin-bottom: 13px;
}

.architecture-grid p {
    color: #958a73;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   CULTURAL INFLUENCE
========================================================= */

.influence-section {
    padding: 120px 7%;

    background: #0c0805;
}

.influence-content {
    max-width: 1050px;

    margin: auto;
}

.influence-content > p {
    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;

    color: #a99c83;

    font-size: 14px;

    line-height: 2;
}

.influence-grid {
    display: grid;

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

    gap: 22px;
}

.influence-grid article {
    padding: 35px;

    background: #181007;

    border-left: 2px solid #866439;
}

.influence-grid h3 {
    font-family: "Cinzel", serif;

    color: #d1b271;

    margin-bottom: 14px;

    font-size: 19px;
}

.influence-grid p {
    color: #978b75;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   TIMELINE
========================================================= */

.hindu-timeline {
    padding: 125px 7%;

    background:
        linear-gradient(
            180deg,
            #171009,
            #0b0805
        );
}

.timeline {
    max-width: 900px;

    margin: auto;

    position: relative;
}

.timeline::before {
    content: "";

    position: absolute;

    left: 50%;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #8d6b3d 8%,
            #8d6b3d 92%,
            transparent
        );

    transform: translateX(-50%);
}

.timeline article {
    width: 50%;

    padding: 0 45px 55px;

    position: relative;
}

.timeline article:nth-child(odd) {
    text-align: right;
}

.timeline article:nth-child(even) {
    margin-left: 50%;
}

.timeline article::after {
    content: "";

    position: absolute;

    top: 5px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #161009;

    border: 2px solid #b08a4d;

    box-shadow:
        0 0 0 5px rgba(176, 138, 77, 0.08);
}

.timeline article:nth-child(odd)::after {
    right: -7px;
}

.timeline article:nth-child(even)::after {
    left: -7px;
}

.timeline article span {
    font-family: "Cinzel", serif;

    color: #b28a4c;

    font-size: 11px;

    letter-spacing: 1px;
}

.timeline article h3 {
    margin: 9px 0;

    font-family: "Cinzel", serif;

    color: #d4b876;

    font-size: 20px;
}

.timeline article p {
    color: #948975;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   CLOSING
========================================================= */

.closing-section {
    padding: 120px 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            #21150a,
            #0b0805 70%
        );

    border-top: 1px solid #493721;
}

.closing-symbol {
    font-size: 65px;

    color: #c39a52;

    margin-bottom: 15px;

    animation: symbolPulse 4s ease-in-out infinite;
}

.closing-section h2 {
    font-family: "Cinzel", serif;

    color: #dcc28b;

    font-size: 32px;

    margin-bottom: 20px;
}

.closing-section p {
    max-width: 700px;

    margin: auto;

    color: #988b72;

    font-size: 14px;

    line-height: 2;
}


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

footer {
    padding: 60px 20px;

    text-align: center;

    background: #080604;

    border-top: 1px solid #4a3823;
}

.footer-logo {
    font-family: "Cinzel", serif;

    color: #c29a52;

    letter-spacing: 3px;

    font-size: 18px;
}

footer p {
    margin-top: 15px;

    color: #85775d;

    font-size: 13px;
}

.footer-line {
    width: 100px;

    height: 1px;

    margin: 25px auto;

    background: #725631;
}

.developer strong,
.powered strong {
    color: #c39a52;

    font-family: "Cinzel", serif;
}

.copyright {
    margin-top: 18px !important;

    font-size: 11px !important;

    letter-spacing: 1px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .navbar {
        flex-direction: column;

        gap: 20px;

        padding: 20px;
    }

    .navbar nav {
        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;
    }

    .history-grid,
    .texts-grid,
    .festival-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .divinity-content,
    .concept-grid,
    .influence-grid {
        grid-template-columns: 1fr;
    }

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

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

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

}


@media (max-width: 650px) {

    .hindu-hero {
        min-height: 680px;
    }

    .hero-content {
        padding: 25px;
    }

    .hero-label {
        letter-spacing: 3px;
    }

    .om-symbol {
        font-size: 75px;
    }

    .hero-content h1 {
        font-size: 48px;

        letter-spacing: 4px;
    }

    .hero-description {
        font-size: 14px;
    }

    .history-grid,
    .texts-grid,
    .festival-grid,
    .murugan-grid,
    .tradition-cards,
    .architecture-grid {
        grid-template-columns: 1fr;
    }

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

    .timeline::before {
        left: 8px;
    }

    .timeline article,
    .timeline article:nth-child(even) {
        width: 100%;

        margin-left: 0;

        padding-left: 35px;

        padding-right: 10px;

        text-align: left;
    }

    .timeline article::after,
    .timeline article:nth-child(odd)::after,
    .timeline article:nth-child(even)::after {
        left: 2px;

        right: auto;
    }

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

    .section-heading h2 {
        font-size: 32px;
    }

    .intro-section,
    .history-section,
    .texts-section,
    .divinity-section,
    .concepts-section,
    .moksha-section,
    .tradition-section,
    .murugan-section,
    .festivals-section,
    .architecture-section,
    .influence-section,
    .hindu-timeline {
        padding-top: 85px;

        padding-bottom: 85px;
    }

}

/* =========================================================
   EDUCATIONAL DISCLAIMER
   ========================================================= */

.disclaimer-section {
    padding: 90px 6%;

    background:
        linear-gradient(
            180deg,
            #0b0a08,
            #11100c
        );

    border-top: 1px solid #3d3020;
}


.disclaimer-card {
    max-width: 950px;

    margin: auto;

    padding: 45px 50px;

    background:
        linear-gradient(
            145deg,
            #19160f,
            #100f0b
        );

    border: 1px solid #51432b;

    text-align: center;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.28);
}


.disclaimer-label {
    font-family: "Cinzel", serif;

    font-size: 10px;

    letter-spacing: 4px;

    color: #a98248;
}


.disclaimer-card h2 {
    margin: 14px 0 22px;

    font-family: "Cinzel", serif;

    font-size: 27px;

    color: #ddc99a;
}


.disclaimer-card p {
    max-width: 800px;

    margin: 0 auto 18px;

    color: #958a76;

    font-size: 12px;

    line-height: 1.9;
}


.disclaimer-card .disclaimer-note {
    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #403522;

    color: #b49a68;

    font-size: 11px;
}


/* =========================================================
   DISCLAIMER RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .disclaimer-section {
        padding: 65px 5%;
    }

    .disclaimer-card {
        padding: 32px 22px;
    }

    .disclaimer-card h2 {
        font-size: 22px;
    }

    .disclaimer-card p {
        font-size: 11px;
    }
}