:root {

    --navy: #061521;
    --navy-light: #0d2638;

    --gold: #d99a17;
    --gold-light: #f0bd4f;

    --cream: #f7f2e8;
    --cream-dark: #e9dfce;

    --text: #1c2730;
    --text-light: #f9f5ed;

    --muted: #7c7a72;

    --radius: 14px;

    --container: 1200px;

}


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

* {

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

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Inter', sans-serif;

    background: var(--cream);

    color: var(--text);

    line-height: 1.6;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input {

    font: inherit;

}


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

.container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline: auto;

}


.section-padding {

    padding: 100px 0;

}


.eyebrow {

    display: inline-block;

    color: var(--gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 18px;

}


h1,
h2,
h3 {

    font-family: 'Cormorant Garamond', serif;

    line-height: 1.1;

}


h2 {

    font-size: clamp(
        38px,
        5vw,
        64px
    );

}


p {

    color: var(--muted);

}


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

.site-header {

    position: fixed;

    inset: 0 0 auto 0;

    z-index: 1000;

    background: rgba(
        6,
        21,
        33,
        0.94
    );

    backdrop-filter: blur(12px);

}


.nav-wrapper {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

}


.brand-mark {

    display: flex;

    flex-direction: column;

    align-items: center;

    line-height: 1;

    font-size: 18px;

}


.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.brand-text strong {

    font-family: 'Cormorant Garamond', serif;

    font-size: 22px;

    letter-spacing: 3px;

}


.brand-text span {

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 3px;

    margin-top: 4px;

}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 30px;

}


.desktop-nav a {

    color: white;

    font-size: 13px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: color .3s ease;

}


.desktop-nav a:hover {

    color: var(--gold-light);

}


.nav-button {

    background: var(--gold);

    color: var(--navy) !important;

    padding: 12px 22px;

    border-radius: 8px;

    font-weight: 700 !important;

}


.mobile-menu-button {

    display: none;

    border: 0;

    background: transparent;

    color: white;

    font-size: 26px;

    cursor: pointer;

}


.mobile-nav {

    display: none;

}


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

.hero {

    min-height: 780px;

    padding-top: 78px;

    position: relative;

    background:

        linear-gradient(
            90deg,
            rgba(6, 21, 33, .85),
            rgba(6, 21, 33, .2)
        ),

        url("assets/hero-story-world.jpg")
        center / cover no-repeat;

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.hero-content {

    position: relative;

    z-index: 2;

}


.hero-copy {

    max-width: 650px;

}


.hero h1 {

    font-size: clamp(
        58px,
        7vw,
        100px
    );

    margin-bottom: 25px;

}


.hero h1 span {

    display: block;

    color: var(--gold-light);

}


.hero p {

    color: rgba(
        255,
        255,
        255,
        .82
    );

    max-width: 540px;

    font-size: 18px;

}


.hero-actions {

    display: flex;

    gap: 15px;

    margin-top: 35px;

    flex-wrap: wrap;

}


.button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 25px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: transform .3s ease;

}


.button:hover {

    transform: translateY(-3px);

}


.button-primary {

    background: var(--gold);

    color: var(--navy);

}


.button-secondary {

    border: 1px solid rgba(
        255,
        255,
        255,
        .7
    );

    color: white;

}


.hero-features {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: grid;

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

    background: rgba(
        6,
        21,
        33,
        .92
    );

    border: 1px solid rgba(
        217,
        154,
        23,
        .35
    );

    border-radius: 14px;

    overflow: hidden;

}


.feature {

    padding: 22px;

    display: flex;

    gap: 15px;

    align-items: center;

}


.feature + .feature {

    border-left: 1px solid rgba(
        255,
        255,
        255,
        .08
    );

}


.feature-icon {

    font-size: 28px;

}


.feature h3 {

    color: white;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    margin-bottom: 4px;

}


.feature p {

    color: rgba(
        255,
        255,
        255,
        .65
    );

    font-size: 12px;

}


/* ================= STORIES ================= */

.stories-section {

    background: var(--cream);

}


.section-heading {

    text-align: center;

    margin-bottom: 55px;

}


.heading-decoration {

    color: var(--gold);

    margin-top: 15px;

    font-size: 24px;

}


.story-grid {

    display: grid;

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

    gap: 20px;

}


.story-card {

    background: var(--navy);

    border-radius: var(--radius);

    overflow: hidden;

    transition: transform .35s ease;

}


.story-card:hover {

    transform: translateY(-8px);

}


.story-image {

    height: 260px;

    position: relative;

    background-size: cover;

    background-position: center;

}


.story-panchatantra {

    background-image:

        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.65)
        ),

        url("assets/panchatantra.jpg");

}


.story-krishna {

    background-image:

        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.65)
        ),

        url("assets/krishna.jpg");

}


.story-ramayana {

    background-image:

        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.65)
        ),

        url("assets/ramayana.jpg");

}


.story-heroes {

    background-image:

        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.65)
        ),

        url("assets/indian-heroes.jpg");

}


.story-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    background: var(--gold);

    color: var(--navy);

    padding: 5px 9px;

    font-size: 9px;

    font-weight: 700;

    border-radius: 4px;

}


.story-content {

    padding: 24px;

}


.story-content h3 {

    color: var(--gold-light);

    font-size: 30px;

    margin-bottom: 8px;

}


.story-content p {

    color: rgba(
        255,
        255,
        255,
        .72
    );

    font-size: 14px;

    min-height: 68px;

}


.card-button {

    display: inline-block;

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

    color: white;

    padding: 9px 20px;

    border-radius: 6px;

    font-size: 11px;

    text-transform: uppercase;

    margin-top: 18px;

    transition: all .3s ease;

}


.card-button:hover {

    background: var(--gold);

    color: var(--navy);

}


/* ================= NEWSLETTER ================= */

.newsletter-section {

    padding: 35px 0;

    background: var(--cream-dark);

}


.newsletter-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.newsletter-copy h2 {

    font-size: 36px;

    margin-bottom: 8px;

}


.newsletter-copy p {

    max-width: 500px;

}


.newsletter-form {

    display: flex;

    min-width: 430px;

}


.newsletter-form input {

    flex: 1;

    border: 1px solid #cfc5b3;

    border-right: 0;

    border-radius: 8px 0 0 8px;

    padding: 15px;

    background: white;

    outline: none;

}


.newsletter-form button {

    border: 0;

    background: var(--gold);

    color: var(--navy);

    padding: 0 25px;

    border-radius: 0 8px 8px 0;

    font-weight: 700;

    cursor: pointer;

}


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

.about-section {

    background: white;

}


.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}


.about-grid h2 {

    max-width: 600px;

}


.about-grid p {

    margin-bottom: 20px;

    font-size: 17px;

}


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

.contact-section {

    background: var(--navy);

    color: white;

    text-align: center;

}


.contact-box {

    max-width: 700px;

}


.contact-box h2 {

    margin-bottom: 20px;

}


.contact-box p {

    color: rgba(
        255,
        255,
        255,
        .7
    );

}


.social-links {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;

    flex-wrap: wrap;

}


.social-links a {

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

    color: white;

    padding: 12px 22px;

    border-radius: 7px;

    transition: all .3s ease;

}


.social-links a:hover {

    background: var(--gold);

    color: var(--navy);

}


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

.site-footer {

    background: #031019;

    color: white;

    padding: 35px 0;

}


.footer-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.site-footer h3 {

    color: var(--gold-light);

    font-size: 25px;

}


.site-footer p {

    color: rgba(
        255,
        255,
        255,
        .55
    );

    font-size: 13px;

}


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

@media (max-width: 1000px) {


    .desktop-nav {

        display: none;

    }


    .mobile-menu-button {

        display: block;

    }


    .mobile-nav {

        padding: 20px;

        background: var(--navy);

        flex-direction: column;

        gap: 20px;

    }


    .mobile-nav.active {

        display: flex;

    }


    .hero-features {

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

    }


    .story-grid {

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

    }


}


@media (max-width: 700px) {


    .container {

        width: min(
            calc(100% - 30px),
            var(--container)
        );

    }


    .section-padding {

        padding: 70px 0;

    }


    .hero {

        min-height: 850px;

    }


    .hero h1 {

        font-size: 58px;

    }


    .hero-features {

        position: relative;

        bottom: auto;

        left: auto;

        transform: none;

        margin-top: 70px;

        grid-template-columns: 1fr;

    }


    .feature + .feature {

        border-left: 0;

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

    }


    .story-grid {

        grid-template-columns: 1fr;

    }


    .newsletter-wrapper {

        flex-direction: column;

        align-items: stretch;

    }


    .newsletter-form {

        min-width: 0;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .footer-wrapper {

        flex-direction: column;

        align-items: flex-start;

    }


}