/* ==========================================================
   WAIN NAKUL — PUBLIC INFO WORLD V1
   Contact / About / Privacy / Terms
========================================================== */

:root {
    --wn-info-brand: #d01876;
    --wn-info-brand-dark: #8b145f;
    --wn-info-purple: #6e38e8;
    --wn-info-deep: #5d145c;
    --wn-info-text: #4d3a4d;
    --wn-info-muted: #79697a;
    --wn-info-line: rgba(153,57,132,.12);
    --wn-info-surface: rgba(255,255,255,.88);
}


/* ==========================================================
   GLOBAL MAP WORLD
========================================================== */

body.wn-info-world {
    position: relative;
    isolation: isolate;
    min-height: 100vh;

    margin: 0;

    color: var(--wn-info-text);

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(208,24,118,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 38%,
            rgba(110,56,232,.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #fff 48%,
            #fff9fc 100%
        ) !important;
}


body.wn-info-world::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(
            28deg,
            transparent 0 47%,
            rgba(208,24,118,.085) 47.4% 48%,
            transparent 48.5% 100%
        ),
        linear-gradient(
            -31deg,
            transparent 0 46%,
            rgba(110,56,232,.055) 46.5% 47.2%,
            transparent 47.8% 100%
        ),
        linear-gradient(
            90deg,
            transparent 0 48%,
            rgba(208,24,118,.025) 48.5% 49%,
            transparent 49.5% 100%
        );

    background-size:
        320px 220px,
        410px 270px,
        210px 210px;

    opacity: .72;
}


body.wn-info-world::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 22%,
            rgba(208,24,118,.42) 0 3px,
            #fff 4px 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 32% 67%,
            rgba(110,56,232,.25) 0 3px,
            #fff 4px 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 73% 17%,
            rgba(208,24,118,.32) 0 3px,
            #fff 4px 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 91% 73%,
            rgba(110,56,232,.22) 0 3px,
            #fff 4px 7px,
            transparent 8px
        );

    opacity: .72;
}


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

body.wn-info-world .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;

    background: rgba(255,255,255,.86) !important;
    border-block-end: 1px solid var(--wn-info-line) !important;

    box-shadow: 0 8px 28px rgba(82,25,76,.035) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


body.wn-info-world .topbar-inner {
    min-height: 72px;
}


body.wn-info-world .brand {
    color: var(--wn-info-deep) !important;
    font-weight: 900 !important;
}


body.wn-info-world .back {
    min-height: 42px;
    padding-inline: 15px !important;

    border: 1px solid rgba(208,24,118,.13) !important;
    border-radius: 14px !important;

    color: var(--wn-info-brand-dark) !important;
    background: rgba(255,255,255,.82) !important;

    text-decoration: none;
}


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

body.wn-info-world .hero {
    position: relative;
    overflow: hidden;

    width: min(1180px, calc(100% - 32px));
    margin-inline: auto !important;
    margin-block: clamp(22px, 4vw, 46px) 0 !important;

    padding:
        clamp(34px, 5vw, 66px)
        clamp(24px, 5vw, 64px) !important;

    border: 1px solid rgba(153,57,132,.11);
    border-radius: clamp(24px, 3vw, 34px);

    background:
        radial-gradient(
            circle at 15% 24%,
            rgba(208,24,118,.10),
            transparent 29%
        ),
        radial-gradient(
            circle at 84% 76%,
            rgba(110,56,232,.075),
            transparent 31%
        ),
        rgba(255,255,255,.84) !important;

    box-shadow:
        0 22px 60px rgba(92,24,84,.06) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    color: var(--wn-info-text) !important;
}


body.wn-info-world .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            24deg,
            transparent 0 47%,
            rgba(208,24,118,.09) 47.5% 48.2%,
            transparent 48.7% 100%
        ),
        radial-gradient(
            circle at 88% 22%,
            var(--wn-info-brand) 0 5px,
            #fff 6px 10px,
            transparent 11px
        );

    opacity: .65;
}


body.wn-info-world .hero > * {
    position: relative;
    z-index: 2;
}


body.wn-info-world .hero h1 {
    margin-block-start: 0 !important;

    color: var(--wn-info-deep) !important;

    font-size:
        clamp(30px, 4vw, 48px) !important;

    line-height: 1.25 !important;
    font-weight: 950 !important;
}


body.wn-info-world .hero p {
    max-width: 760px;
    margin-inline: auto;

    color: var(--wn-info-muted) !important;

    font-size:
        clamp(15px, 1.6vw, 18px) !important;

    line-height: 1.9 !important;
}


/* ==========================================================
   PAGE / MAIN CARD
========================================================== */

body.wn-info-world .page {
    position: relative;

    width: min(1180px, calc(100% - 32px)) !important;

    margin-inline: auto !important;
    margin-block:
        clamp(18px, 3vw, 34px)
        clamp(42px, 7vw, 84px) !important;

    padding: 0 !important;
}


body.wn-info-world .card {
    border: 1px solid var(--wn-info-line) !important;

    border-radius:
        clamp(22px, 2.4vw, 30px) !important;

    background:
        var(--wn-info-surface) !important;

    box-shadow:
        0 18px 54px rgba(91,28,84,.055) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ==========================================================
   CONTENT TYPOGRAPHY
========================================================== */

body.wn-info-world .intro {
    color: var(--wn-info-text) !important;

    font-size:
        clamp(15px, 1.35vw, 17px) !important;

    line-height:
        1.95 !important;
}


body.wn-info-world .section {
    border-color:
        rgba(153,57,132,.09) !important;
}


body.wn-info-world .section h2,
body.wn-info-world .social-title {
    color:
        var(--wn-info-deep) !important;

    font-size:
        clamp(18px, 1.8vw, 23px) !important;

    line-height:
        1.45 !important;

    font-weight:
        900 !important;
}


body.wn-info-world .section p,
body.wn-info-world .section li {
    color:
        #574658 !important;

    font-size:
        clamp(14px, 1.25vw, 16px) !important;

    line-height:
        2 !important;
}


/* ==========================================================
   CONTACT / POINTS / BOXES
========================================================== */

body.wn-info-world .contact-item,
body.wn-info-world .point,
body.wn-info-world .privacy-box,
body.wn-info-world .note,
body.wn-info-world .contact {
    border:
        1px solid rgba(153,57,132,.10) !important;

    border-radius:
        18px !important;

    background:
        rgba(255,255,255,.76) !important;

    box-shadow:
        0 10px 30px rgba(91,28,84,.035) !important;
}


body.wn-info-world .contact-item {
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


@media (hover:hover) {
    body.wn-info-world .contact-item:hover {
        transform: translateY(-2px);

        box-shadow:
            0 16px 38px rgba(91,28,84,.07) !important;
    }
}


body.wn-info-world .label {
    color:
        var(--wn-info-brand-dark) !important;

    font-weight:
        800 !important;
}


body.wn-info-world a {
    text-underline-offset: 3px;
}


body.wn-info-world .social,
body.wn-info-world .whatsapp-button {
    border-radius:
        15px !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


@media (hover:hover) {
    body.wn-info-world .social:hover,
    body.wn-info-world .whatsapp-button:hover {
        transform:
            translateY(-2px);
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    body.wn-info-world .hero,
    body.wn-info-world .page {
        width:
            min(100% - 24px, 760px) !important;
    }

    body.wn-info-world .hero {
        padding:
            34px 24px !important;
    }
}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width: 640px) {

    body.wn-info-world .topbar-inner {
        min-height:
            62px;
    }

    body.wn-info-world .hero,
    body.wn-info-world .page {
        width:
            calc(100% - 20px) !important;
    }

    body.wn-info-world .hero {
        margin-block-start:
            12px !important;

        padding:
            28px 18px !important;

        border-radius:
            22px;
    }

    body.wn-info-world .hero h1 {
        font-size:
            29px !important;
    }

    body.wn-info-world .card {
        border-radius:
            20px !important;
    }

    body.wn-info-world .section p,
    body.wn-info-world .section li {
        font-size:
            15px !important;
    }
}


/* ==========================================================
   FUTURE RTL / LTR
========================================================== */

html[dir="rtl"] body.wn-info-world {
    text-align: start;
}

html[dir="ltr"] body.wn-info-world {
    text-align: start;
}


/* ==========================================================
   WAIN NAKUL — MASTER MAP IDENTITY
   Uses the official transparent RGBA map/food structure.
   Shared visual foundation for all public info pages.
========================================================== */

body.wn-info-world {
    background:
        linear-gradient(
            180deg,
            rgba(255,250,253,.78) 0%,
            rgba(255,255,255,.72) 48%,
            rgba(255,249,252,.80) 100%
        ) !important;
}

body.wn-info-world::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        url("/images/wain-nakul/hero-map-bg.png");

    background-repeat: repeat-y;
    background-position: center top;
    background-size: min(100vw, 1024px) auto;

    opacity: .22;
}

body.wn-info-world::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.34)
        );

    opacity: 1;
}

/* Keep all content readable while allowing the master identity
   to remain visible through the page structure. */
body.wn-info-world .topbar,
body.wn-info-world .hero,
body.wn-info-world .card,
body.wn-info-world .contact-item,
body.wn-info-world .point,
body.wn-info-world .privacy-box,
body.wn-info-world .note,
body.wn-info-world .contact {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Slightly more transparent content surfaces so the map remains
   visibly present instead of disappearing behind white panels. */
body.wn-info-world .hero {
    background: rgba(255,255,255,.72) !important;
}

body.wn-info-world .card {
    background: rgba(255,255,255,.72) !important;
}

body.wn-info-world .contact-item,
body.wn-info-world .point,
body.wn-info-world .privacy-box,
body.wn-info-world .note,
body.wn-info-world .contact {
    background: rgba(255,255,255,.66) !important;
}

/* Do not mirror/rotate the actual map when switching language.
   RTL/LTR affects content direction only. */
html[dir="rtl"] body.wn-info-world::before,
html[dir="ltr"] body.wn-info-world::before {
    background-position: center top;
}

/* Tablet */
@media (max-width: 900px) {
    body.wn-info-world::before {
        background-size: auto 1200px;
        opacity: .20;
    }
}

/* Phone */
@media (max-width: 640px) {
    body.wn-info-world::before {
        background-size: auto 900px;
        opacity: .18;
    }
}


/* ==========================================================
   WAIN NAKUL — INFO WORLD VISUAL TUNING V2
   Reference: Contact page
========================================================== */

/* Let the master map remain visible across the full page */
body.wn-info-world::before {
    opacity: .15 !important;
    background-size: min(100vw, 980px) auto !important;
    background-position: center top !important;
}

/* Very light veil only; do not wash out the map */
body.wn-info-world::after {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.12)
        ) !important;
}

/* Header */
body.wn-info-world .topbar {
    background: rgba(255,255,255,.78) !important;
}

/* Hero becomes a translucent branded surface */
body.wn-info-world .hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.68),
            rgba(255,249,253,.58)
        ) !important;

    border-color: rgba(208,24,118,.12) !important;
}

/* Main content card */
body.wn-info-world .card {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.67),
            rgba(255,251,254,.57)
        ) !important;

    border-color: rgba(153,57,132,.105) !important;
}

/* Internal blocks: preserve readability but reveal the map */
body.wn-info-world .contact-item,
body.wn-info-world .point,
body.wn-info-world .privacy-box,
body.wn-info-world .note,
body.wn-info-world .contact {
    background:
        rgba(255,255,255,.52) !important;

    border-color:
        rgba(153,57,132,.095) !important;
}

/* Make social/contact blocks feel like floating glass */
body.wn-info-world .social,
body.wn-info-world .whatsapp-button {
    background:
        rgba(255,255,255,.60) !important;
    border-color:
        rgba(208,24,118,.11) !important;
}

/* Keep typography visually dominant */
body.wn-info-world .hero h1,
body.wn-info-world .section h2,
body.wn-info-world .social-title {
    text-shadow:
        0 1px 1px rgba(255,255,255,.75);
}

/* Large screens */
@media (min-width: 1200px) {
    body.wn-info-world::before {
        opacity: .17 !important;
        background-size: 920px auto !important;
    }

    body.wn-info-world .hero,
    body.wn-info-world .card {
        box-shadow:
            0 20px 60px rgba(91,28,84,.055) !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    body.wn-info-world::before {
        opacity: .14 !important;
        background-size: auto 1100px !important;
    }

    body.wn-info-world .hero,
    body.wn-info-world .card {
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    body.wn-info-world::before {
        opacity: .12 !important;
        background-size: auto 850px !important;
    }

    body.wn-info-world .hero,
    body.wn-info-world .card,
    body.wn-info-world .contact-item,
    body.wn-info-world .point,
    body.wn-info-world .privacy-box,
    body.wn-info-world .note,
    body.wn-info-world .contact {
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }
}