/* =========================================================
   STYLES FOR "THE RIGHT TO BE FULFILLED"
   Original visual styling preserved
   Responsive layout mechanics revised
   ========================================================= */


/* =========================================================
   BODY
   ========================================================= */

body {
    font-family: "Junge", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-shadow: 1px 1px 0px #000;
    color: #8D92D4;
    background-color: #22155B;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

b,
strong,
h1,
h2 {
    color: #B4A474;
    text-shadow: 1px 1px 0px #000;
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}

h2 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: lowercase;
}


/* =========================================================
   WRAPPER
   ========================================================= */

#wrapper {
    max-width: 1000px;
    width: 90%;
    padding: 20px;
    margin: 20px auto;
    background-color: #140806;
    border: 1px solid #6282DC;
    box-sizing: border-box;
}


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

.content-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 15px;
    padding-bottom: 20px;
    border-radius: 4px;

    background: #564182;
    background: linear-gradient(
        45deg,
        rgba(86, 65, 130, 1) 0%,
        rgba(15, 46, 84, 1) 25%,
        rgba(11, 0, 79, 1) 50%,
        rgba(15, 46, 84, 1) 75%,
        rgba(93, 42, 110, 1) 100%
    );
}

.header-image {
    flex: 1 1 300px;
}

.header-image img {
    width: 80%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5% 0% 0% 5%;
    border: 1px solid #6282DC;
    box-sizing: border-box;
}

.header-text {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-left: -30px;
    box-sizing: border-box;
}

.intro {
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(114, 95, 203, 0.3);
    padding-top: 10px;
    width: 60%;
}

.back-link {
    text-align: right;
}


/* =========================================================
   CONTENT PAIRS
   =========================================================

   IMAGE comes first in every pair.

   Normal:
       TEXT | IMAGE

   Reverse:
       IMAGE | TEXT
   ========================================================= */

.content-pair {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    padding: 20px;
    border-radius: 4px;
    box-sizing: border-box;
}

.content-pair.reverse {
    flex-direction: row;
}


/* =========================================================
   IMAGE / TEXT GAP — DESKTOP
   =========================================================

   Sections 3 and 7 are image-left / text-right.
   Reduce their gap by approximately 40%.

   30px → 18px
   ========================================================= */

.content-pair.reverse {
    gap: 18px;
}


/* =========================================================
   TEXT BLOCK
   ========================================================= */

.text-block {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
}

.text-block p {
    margin-top: 0;
}


/* =========================================================
   IMAGE BLOCK
   ========================================================= */

.image-block {
    flex: 0 0 300px;
    width: 300px;

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

    box-sizing: border-box;
}

.image-block img {
    max-width: 100%;
    height: auto;

    border: 1px solid #7C5EF7;
    padding: 2%;

    background: #190c38;
    background: linear-gradient(
        45deg,
        rgba(25, 12, 56, 1) 0%,
        rgba(35, 20, 82, 1) 50%,
        rgba(25, 12, 56, 1) 100%
    );

    box-sizing: border-box;
}


/* =========================================================
   SPECIAL IMAGE LIMITERS
   ========================================================= */

/* #5 */
.pair-5 .image-block img {
    max-width: 275px;
    height: auto;
}

/* #8 */
.pair-8 .image-block img {
    max-width: 275px;
    height: auto;
}


/* =========================================================
   BACKGROUND VARIANTS
   ========================================================= */

.bg-gradient-a,
.bg-gradient-b,
.content-footer {
    background: #564182;
    background: linear-gradient(
        45deg,
        rgba(86, 65, 130, 1) 0%,
        rgba(15, 46, 84, 1) 25%,
        rgba(11, 0, 79, 1) 50%,
        rgba(15, 46, 84, 1) 75%,
        rgba(93, 42, 110, 1) 100%
    );
}


/* =========================================================
   FINAL SECTION
   ========================================================= */

.content-final {
    margin-bottom: 40px;
}

.text-block-full {
    font-size: 1.2rem;
    margin-bottom: 20px;
    width: 80%;
    margin: 5% auto;
    text-align: center;
}


/* =========================================================
   DECORATIVE BOTTOM IMAGE
   ========================================================= */

.decorative-image {
    width: 90%;
    height: 200px;

    background-image:
        url("../../images/prem_rawat/fulfilled/live-audience.jpg");

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

    border: 1px solid #7C5EF7;

    margin: 5% auto;
}


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

.content-footer {
    margin-top: 40px;
    border: 1px solid #7C5EF7;
    padding: 4%;

    font-family: Avenir, Helvetica, sans-serif;
    font-size: 0.9rem;

    border-radius: 10px;
}

.attrib {
    margin: 0;
    font-style: normal;
}

.attrib em {
    color: #B4A474;
}


/* =========================================================
   LINKS
   ========================================================= */

.link1 {
    font: 12px Arial, Helvetica, sans-serif;
    text-decoration: none;
    letter-spacing: -0.05em;
    color: #725FCB;
    transition: color 0.2s ease;
}

a.link1:hover {
    color: #B6BAE4;
    text-decoration: underline;
}

a.link1:active {
    color: #E9E296;
}


/* =========================================================
   TABLET
   601px–900px
   ========================================================= */

@media (max-width: 900px) and (min-width: 601px) {

    /* -----------------------------------------
       CONTENT PAIRS
       ----------------------------------------- */

    .content-pair,
    .content-pair.reverse {
        display: block;
        padding: 20px;
        margin-bottom: 40px;
    }


    /* -----------------------------------------
       TABLET IMAGE
       ----------------------------------------- */

    .content-pair .image-block {
        display: block;
        width: 38%;
        max-width: 300px;
        height: auto;
        box-sizing: border-box;
        margin-bottom: 10px;
    }


    /* -----------------------------------------
       STANDARD PAIRS
       IMAGE RIGHT
       ----------------------------------------- */

    .content-pair:not(.reverse) .image-block {
        float: right;
        margin-left: 25px;
    }


    /* -----------------------------------------
       REVERSE PAIRS
       IMAGE LEFT
       ----------------------------------------- */

    .content-pair.reverse .image-block {
        float: left;
        margin-right: 25px;
    }


    /* -----------------------------------------
       TABLET IMAGES
       ----------------------------------------- */

    .content-pair .image-block img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }


    .content-pair.pair-5 .image-block img {
        max-width: 275px;
    }

    .content-pair.pair-8 .image-block img {
        max-width: 275px;
    }


    /* -----------------------------------------
       TABLET TEXT
       ----------------------------------------- */

    .content-pair .text-block {
        display: block;
        width: auto;
        min-width: 0;
        font-size: 1rem;
    }


    /* -----------------------------------------
       CLEAR EACH PAIR
       ----------------------------------------- */

    .content-pair::after {
        content: "";
        display: table;
        clear: both;
    }


/* =====================================================
   TABLET HEADER — STABLE IMAGE + TEXT WRAP
   ===================================================== */

@media (max-width: 900px) and (min-width: 601px) {

    .content-header {
        display: block;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header-image {
        float: left;

        /*
           Keep the tablet image at approximately
           80% of its original desktop presentation.
        */
        width: 240px;
        max-width: 240px;

        margin-right: 20px;
        margin-bottom: 10px;

        box-sizing: border-box;
    }

    .header-image img {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        margin: 5% 0 0 0;
    }

    .header-text {
        display: block;

        width: auto;
        min-width: 0;

        /*
           Prevent text from touching the wrapper edge.
        */
        padding-left: 10px;

        margin-left: 0;
    }

    .content-header::after {
        content: "";
        display: table;
        clear: both;
    }
}

    /* -----------------------------------------
       EXTRA SPACE BETWEEN #8 AND #9
       ----------------------------------------- */

    .pair-8 {
        margin-bottom: 55px;
    }
}


/* =========================================================
   PHONE
   600px AND BELOW
   ========================================================= */

@media (max-width: 600px) {

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

    .content-header {
        display: flex;
        flex-direction: column;
        gap: 15px;

        padding: 15px;
        padding-bottom: 0px;

        margin-bottom: 28px;
    }

    .header-image {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .header-image img {
        width: 70%;
        max-width: 250px;
        margin: 10px auto;
    }

    .header-text {
        width: 100%;
        margin-left: 0;
        text-align: center;
        margin-bottom: -60px;
    }

    .intro {
        font-size: 0.95rem;
        margin-bottom: 15px;
    }


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

    .nav-links {
        width: 85%;
        margin: 0 auto;

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

        gap: 15px;
    }

    .back-link {
        text-align: center;
    }


    /* =====================================================
       CONTENT PAIRS
       ===================================================== */

    .content-pair,
    .content-pair.reverse {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px 10px;
        margin-bottom: 30px;
        text-align: center;
    }


    /* -----------------------------------------
       PHONE IMAGE
       ----------------------------------------- */

    .content-pair .image-block {
        order: -1;
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .content-pair .image-block img {
        display: block;
        width: 65%;
        max-width: 220px;
        height: auto;
        margin: 0 auto;
    }


    /* -----------------------------------------
       #5 IMAGE
       ----------------------------------------- */

    .pair-5 .image-block img {
        width: 65%;
        max-width: 275px;
    }


    /* -----------------------------------------
       #8 IMAGE
       ----------------------------------------- */

    .pair-8 .image-block img {
        width: 65%;
        max-width: 275px;
    }


    /* =====================================================
       ALL PHONE TEXT CENTERED
       ===================================================== */

    .content-pair .text-block {
        width: 100%;
        font-size: 1rem;
        text-align: center;
    }


    /* =====================================================
       PHONE-SPECIFIC SPACING
       ===================================================== */


    /* -----------------------------------------
       #2
       50% less space below image
       ----------------------------------------- */

    .pair-2 {
        gap: 7px;
    }


    /* -----------------------------------------
       #3
       Existing spacing retained
       ----------------------------------------- */


    /* -----------------------------------------
       #4
       30% less space below image
       ----------------------------------------- */

    .pair-4 {
        gap: 10px;
    }


    /* -----------------------------------------
       #5 — GRADIENT A
       Double space above image
       80% less space below image
       ----------------------------------------- */

    .pair-5 {
        gap: 3px;
        padding-top: 30px;
    }


    /* -----------------------------------------
       #6
       60% less space below image
       ----------------------------------------- */

    .pair-6 {
        gap: 6px;
    }


    /* -----------------------------------------
       #7
       Existing spacing retained
       ----------------------------------------- */


    /* -----------------------------------------
       #8 — GRADIENT B
       Double space above image
       80% less space below image
       ----------------------------------------- */

    .pair-8 {
        gap: 3px;
        padding-top: 30px;
    }


    /* =====================================================
       GRADIENT PAIRS
       ===================================================== */

    .bg-gradient-a .text-block,
    .bg-gradient-b .text-block {
        padding: 10px 0;
    }


    /* =====================================================
       FINAL SECTION
       ===================================================== */

    .content-final {
        padding-top: 30px;
    }

    .text-block-full {
        width: 90%;
        font-size: 1.05rem;
        text-align: center;
    }


    /* =====================================================
       DECORATIVE IMAGE
       ===================================================== */

    .decorative-image {
        width: 90%;
        height: 140px;
    }


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

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }
}