:root{--maroon:#641d0d;--deep:#3a1209;--saffron:#e76f16;--gold:#c89235;--cream:#fffaf0;--ink:#321a12;--gray:#6e655e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fffdf8;color:var(--ink);font-family:Georgia,'Times New Roman',serif}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}.topbar{background:linear-gradient(90deg,#6b1f0e,#9c3a11,#6b1f0e);color:#fff4d5;padding:7px 4%;font-size:13px}.topbar span{float:right}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:rgba(255,251,242,.97);border-bottom:2px solid #d7a85d;position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:10px}.brand img{width:65px;height:65px;object-fit:contain}.brand strong{font-size:24px;color:var(--maroon);letter-spacing:1px}.brand small{display:block;color:#9b4d25}.site-header nav{display:flex;align-items:center;gap:18px;font-family:Arial,sans-serif;font-size:14px}.site-header nav>a,.drop>a{padding:30px 0}.site-header nav>a:hover,.drop>a:hover{color:var(--saffron)}.drop{position:relative}.drop>div{display:none;position:absolute;top:62px;background:#fff;padding:10px;min-width:160px;box-shadow:0 10px 30px #0002}.drop:hover>div{display:grid}.drop>div a{padding:9px}.donate,.btn{background:linear-gradient(#ef8a21,#c94d08);color:white!important;padding:13px 18px!important;border-radius:6px;box-shadow:0 3px 0 #a83d07}.nav-toggle{display:none}.hero{height:560px;position:relative;overflow:hidden}.quick{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #e2c797;border-radius:12px;margin-top:18px;overflow:hidden;background:#fffaf0}.quick a{text-align:center;padding:14px;font-size:23px;border-right:1px solid #ead9ba}.quick span{display:block;font-size:13px;margin-top:5px}.section{padding:55px 0}.section-title{text-align:center;margin-bottom:25px}.section-title h2{font-size:34px;color:var(--maroon);margin:0}.section-title h2:before,.section-title h2:after{content:'❈';color:var(--gold);font-size:18px;margin:0 15px}.section-title p{color:var(--gray)}.parchment{background:#fbf4e7}.cards.horizontal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(155px,1fr);overflow-x:auto;gap:12px;padding-bottom:10px}.cards article{background:white;border:1px solid #e4d3b7;border-radius:7px;overflow:hidden;text-align:center}.cards img{width:100%;height:190px;object-fit:cover;background:#f3eadc}.cards h3{font-size:15px;margin:12px}.audio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.audio-card{border:1px solid #e2cfaf;padding:18px;border-radius:8px;background:#fff}.audio-card h3{margin:0 0 5px}.audio-card p{color:var(--gray);font-size:.9rem}.audio-card audio{width:100%}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:55px}.feature-grid a{min-height:190px;padding:28px;color:#fff;border-radius:8px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(#0002,#351006cc),url('/assets/images/reference-home.jpg') center/cover}.feature-grid a:nth-child(2){background-position:center 35%}.feature-grid a:nth-child(3){background-position:center 80%}.feature-grid h2{margin:0}.quote{text-align:center;padding:45px 8%;font-size:25px;font-style:italic;background:#f3dfbb;color:#5b210f}.quote small{display:block;margin-top:10px;font-size:14px}.newsletter{background:#45170c;color:white;padding:25px 5%;display:flex;justify-content:space-between;align-items:center}.newsletter small{display:block}.newsletter input{width:360px;padding:13px;border:0}.newsletter button{padding:13px 22px;border:0;background:var(--saffron);color:white}footer{background:linear-gradient(#4a180c,#2b0c06);color:#f8e8ce;padding:45px 5% 15px;font-family:Arial,sans-serif}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-grid a{display:block;padding:5px 0;color:#e8ccb1}.footer-brand{display:flex;align-items:center;gap:12px;font-family:Georgia;font-size:20px;letter-spacing:2px}.footer-brand img{width:65px}.copyright{border-top:1px solid #ffffff33;margin-top:30px;padding-top:18px;font-size:12px}@media(max-width:900px){.topbar span{display:none}.site-header{height:auto;min-height:74px;flex-wrap:wrap}.nav-toggle{display:block;border:0;background:none;font-size:26px}.site-header nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:15px 0}.site-header.open nav{display:flex}.site-header nav>a,.drop>a{padding:8px}.drop>div{position:static;box-shadow:none}.drop:hover>div{display:grid}.hero{height:480px}.hero h1{font-size:44px}.quick{grid-template-columns:repeat(4,1fr)}.audio-grid,.feature-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.newsletter{gap:15px;flex-direction:column;align-items:stretch}.newsletter input{width:70%}}@media(max-width:560px){.brand strong{font-size:18px}.brand img{width:52px;height:52px}.quick{grid-template-columns:repeat(2,1fr)}.audio-grid,.feature-grid,.footer-grid{grid-template-columns:1fr}.section-title h2{font-size:28px}.newsletter input{width:100%;margin-bottom:8px}.newsletter button{width:100%}}
/* =========================================================
   SANAATANA DHARA — HERO SLIDER
========================================================= */

.hero {
    --hero-maroon: #68180f;
    --hero-brown: #7d2d16;
    --hero-gold: #d99132;
    --hero-cream: #fff8e8;

    position: relative;
    width: 100%;
    height: clamp(500px, 43vw, 700px);
    min-height: 500px;
    overflow: hidden;
    background: #6c2814;
}


/* Slides
--------------------------------------------------------- */

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .9s ease,
        visibility .9s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}


/* Background
--------------------------------------------------------- */

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

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    transform: scale(1.025);

    transition:
        transform 7s ease,
        filter .8s ease;
}

.hero-slide.active .hero-bg {
    transform: scale(1);
}


/*
 * FIRST SLIDER IMAGE
 *
 * Put the Krishna image at:
 *
 * assets/images/hero/sanatan-home-slider-bg-1.png
 */

.hero-one {
    background-image:
        url("../images/hero/sanatan-home-slider-bg-1.png");

    background-position: center center;
}


/*
 * SECOND SLIDER IMAGE
 *
 * Put your second generated image at:
 *
 * assets/images/hero/sanatan-home-slider-bg-2.webp
 */

.hero-two {
    background-image:
        url("../images/hero/sanatan-home-slider-bg-2.png");

    background-position: center center;
}


/* Overlay
--------------------------------------------------------- */

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

    background:
        linear-gradient(
            90deg,
            rgba(51, 18, 5, .10) 0%,
            rgba(255, 239, 198, .03) 30%,
            rgba(255, 238, 191, .05) 54%,
            rgba(49, 16, 4, .24) 100%
        );

    pointer-events: none;
}

.hero-overlay-two {
    background:
        linear-gradient(
            90deg,
            rgba(42, 16, 5, .22),
            rgba(255, 234, 180, .05) 48%,
            rgba(42, 16, 5, .30)
        );
}


/* Main layout
--------------------------------------------------------- */

.hero-inner {
    position: relative;
    z-index: 3;

    width: min(1440px, calc(100% - 80px));
    height: 100%;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(300px, .65fr)
        minmax(560px, 1.5fr)
        minmax(300px, .72fr);

    align-items: center;
}


/*
 * Empty left area deliberately leaves Krishna visible.
 */

.hero-copy {
    grid-column: 2;

    width: 100%;
    max-width: 760px;

    justify-self: center;
    text-align: center;

    color: var(--hero-maroon);

    padding: 45px 15px 30px;
}


/* Typography
--------------------------------------------------------- */

.hero-sanskrit {
    display: block;

    margin-bottom: 8px;

    color: #842d18;

    font-family:
        "Noto Serif Devanagari",
        Georgia,
        serif;

    font-size: clamp(18px, 1.5vw, 25px);
    font-weight: 600;

    letter-spacing: .02em;
}


.hero-copy h1 {
    margin: 0;

    color: #65140f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 5vw, 82px);
    line-height: .98;
    font-weight: 700;

    letter-spacing: -.035em;

    text-shadow:
        0 2px 0 rgba(255,255,255,.25);
}


.hero-copy h2 {
    margin: 12px 0 10px;

    color: #6c2418;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(26px, 2.4vw, 40px);
    line-height: 1.08;
    font-weight: 700;
}


.hero-copy > p {
    max-width: 600px;

    margin:
        0 auto
        clamp(20px, 2vw, 34px);

    color: #2e1a12;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(16px, 1.3vw, 21px);
    line-height: 1.55;
}


/* =========================================================
   LEARN / PRACTICE / SERVE / PRESERVE
========================================================= */

.hero-values {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: clamp(22px, 3.2vw, 54px);

    margin-top: 5px;
}


.hero-value {
    width: 92px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    color: #702114;
    text-decoration: none;

    transition:
        transform .25s ease,
        color .25s ease;
}


.hero-value:hover,
.hero-value:focus-visible {
    color: #a3451d;
    transform: translateY(-5px);
}


.hero-value-icon {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(157, 82, 31, .18);
    border-radius: 50%;

    background:
        rgba(255, 231, 177, .65);

    box-shadow:
        inset 0 0 18px rgba(255,255,255,.45),
        0 4px 12px rgba(84, 35, 9, .08);

    transition:
        background .25s ease,
        transform .25s ease;
}


.hero-value:hover .hero-value-icon {
    background:
        rgba(255, 218, 139, .88);

    transform: scale(1.05);
}


.hero-value svg {
    width: 38px;
    height: 38px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero-value strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
    line-height: 1;

    font-weight: 600;
}


/* =========================================================
   VASUDHAIVA KUTUMBAKAM
========================================================= */

.hero-quote {
    grid-column: 3;

    align-self: center;
    justify-self: end;

    width: min(100%, 340px);

    padding:
        24px
        12px;

    text-align: center;

    color: #fff6dd;

    text-shadow:
        0 2px 5px rgba(39, 11, 2, .75);
}


.hero-quote-sanskrit {
    font-family:
        "Noto Serif Devanagari",
        Georgia,
        serif;

    font-size: clamp(26px, 2.1vw, 38px);
    line-height: 1.25;

    font-weight: 600;
}


.hero-quote-divider {
    position: relative;

    display: block;

    width: 82%;
    height: 1px;

    margin: 17px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 232, 171, .9),
            transparent
        );
}


.hero-quote-divider::after {
    content: "◆";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    padding: 0 8px;

    color: #f8d77e;

    background: transparent;

    font-size: 10px;
}


.hero-quote p {
    margin: 0;

    color: #fff3d5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(18px, 1.45vw, 25px);
    line-height: 1.35;

    font-style: italic;
}


/* =========================================================
   PREV / NEXT
========================================================= */

.hero-nav {
    position: absolute;
    z-index: 8;

    top: 50%;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    border:
        1px solid
        rgba(255, 236, 196, .85);

    border-radius: 50%;

    background:
        rgba(65, 24, 12, .76);

    color: #fff8e8;

    cursor: pointer;

    font-family: Arial, sans-serif;
    font-size: 38px;
    line-height: 1;

    box-shadow:
        0 5px 18px rgba(0,0,0,.18);

    backdrop-filter:
        blur(4px);

    transition:
        background .25s ease,
        transform .25s ease;
}


.hero-nav:hover {
    background: #7b2816;

    transform:
        translateY(-50%)
        scale(1.06);
}


.hero-prev {
    left: 25px;
}

.hero-next {
    right: 25px;
}


/* =========================================================
   DOTS
========================================================= */

.hero-dots {
    position: absolute;
    z-index: 9;

    left: 50%;
    bottom: 17px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 9px;
}


.hero-dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border:
        2px solid
        rgba(255,255,255,.95);

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}


.hero-dot.active {
    width: 28px;

    border-radius: 10px;

    background: #fff;
}


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

@media (max-width: 1200px) {

    .hero-inner {
        width: min(100% - 50px, 1200px);

        grid-template-columns:
            .52fr
            1.35fr
            .7fr;
    }

    .hero-values {
        gap: 24px;
    }

    .hero-value-icon {
        width: 58px;
        height: 58px;
    }

    .hero-value svg {
        width: 33px;
        height: 33px;
    }

}


@media (max-width: 991px) {

    .hero {
        height: 650px;
    }

    .hero-one {
        background-position: 35% center;
    }

    .hero-two {
        background-position: center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(49, 15, 4, .20),
                rgba(255, 237, 194, .55) 35%,
                rgba(255, 237, 194, .72) 65%,
                rgba(44, 13, 4, .32)
            );
    }

    .hero-inner {
        width: calc(100% - 80px);

        grid-template-columns:
            1fr;

        justify-items: center;
    }

    .hero-copy {
        grid-column: 1;

        max-width: 680px;

        padding-top: 55px;
    }

    .hero-quote {
        grid-column: 1;

        position: absolute;

        right: 0;
        bottom: 45px;

        width: 280px;

        padding: 12px 5px;
    }

    .hero-quote-sanskrit {
        font-size: 24px;
    }

    .hero-quote p {
        font-size: 17px;
    }

}


@media (max-width: 767px) {

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

    .hero-bg {
        background-size: cover;
    }

    .hero-one {
        background-position: 27% center;
    }

    .hero-inner {
        width: calc(100% - 42px);

        align-items: flex-start;
    }

    .hero-copy {
        margin-top: 35px;

        padding:
            25px
            10px;

        border-radius: 18px;

        background:
            rgba(255, 241, 208, .72);

        box-shadow:
            0 10px 35px
            rgba(67, 23, 5, .08);

        backdrop-filter:
            blur(3px);
    }

    .hero-copy h1 {
        font-size: clamp(42px, 12vw, 64px);
    }

    .hero-copy h2 {
        font-size: 27px;
    }

    .hero-copy > p {
        max-width: 520px;

        font-size: 16px;
    }

    .hero-values {
        display: grid;

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

        gap: 12px;

        width: 100%;
    }

    .hero-value {
        width: auto;
    }

    .hero-value-icon {
        width: 50px;
        height: 50px;
    }

    .hero-value svg {
        width: 28px;
        height: 28px;
    }

    .hero-value strong {
        font-size: 14px;
    }

    .hero-quote {
        right: 50%;

        transform: translateX(50%);

        bottom: 42px;

        width: 90%;
    }

    .hero-nav {
        width: 42px;
        height: 42px;

        font-size: 31px;
    }

    .hero-prev {
        left: 9px;
    }

    .hero-next {
        right: 9px;
    }

}


@media (max-width: 480px) {

    .hero {
        height: 650px;
        min-height: 650px;
    }

    .hero-copy {
        margin-top: 26px;
    }

    .hero-sanskrit {
        font-size: 16px;
    }

    .hero-copy h1 {
        font-size: 42px;
    }

    .hero-copy h2 {
        margin-top: 8px;

        font-size: 23px;
    }

    .hero-copy > p {
        margin-bottom: 20px;

        font-size: 14px;
    }

    .hero-values {
        gap: 7px;
    }

    .hero-value-icon {
        width: 44px;
        height: 44px;
    }

    .hero-value svg {
        width: 24px;
        height: 24px;
    }

    .hero-value strong {
        font-size: 12px;
    }

    .hero-quote-sanskrit {
        font-size: 21px;
    }

    .hero-quote p {
        font-size: 15px;
    }

}


/* Reduced motion accessibility */

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

    .hero-slide,
    .hero-bg,
    .hero-value,
    .hero-value-icon,
    .hero-nav,
    .hero-dot {
        transition: none !important;
    }

}