/*
 * Styles for welcome.php
 * Extracted from the PHP page without changing selectors or declaration order.
 */

/* Extracted from welcome.php - style block 1 */
/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}


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

.hero-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   FLASH NEWS
   ========================================================= */

.top-nav {
    width: 100%;
    background: #212167;
    position: relative;
    overflow: hidden;
}

.breakingNews {
    width: 100%;
    height: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bn-title h2 {
    margin: 0;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
}

.bn-red .bn-title {
    background: #f44a56;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.bn-title span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 10px;
    border-color:
        transparent
        transparent
        transparent
        #f44a56;
    position: absolute;
    right: -10px;
    top: 0;
}

.news-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.news-track {
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: ticker 40s linear infinite;
}

.news-track:hover {
    animation-play-state: paused;
}

.news-track a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding-left: 20px;
    white-space: nowrap;
}

@keyframes ticker {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}


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

.imagedata {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
}

.imagedata picture {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.imagedata img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}


/* =========================================================
   WELCOME SECTION
   ========================================================= */

.df-welcome {
    display: none;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn-log {
    width: 100%;
    margin: 0;
    padding: 15px 30px 20px;
    background: #fff;
    text-align: center;
}

.btn-log .btn-data {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 14px 10px;
}


/* =========================================================
   MOBILE - ALL DEVICES
   320px TO 768px
   ========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block;
        min-height: 100vh;
        background: #fff;
    }


    /* ---------------------------------------------------------
       HEADER
       --------------------------------------------------------- */

    body > header {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }


    /* ---------------------------------------------------------
       HERO
       --------------------------------------------------------- */

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* ---------------------------------------------------------
       FLASH NEWS
       --------------------------------------------------------- */

    .top-nav {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden;
    }

    .breakingNews {
        width: 100%;
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;

        padding: 0 20px;

        font-size: clamp(16px, 5vw, 22px);
    }

    .bn-title h2 {
        font-size: clamp(18px, 5.5vw, 24px);
        line-height: 1;
    }

    .bn-title span {
        border-width: 30px 0 30px 15px;

        right: -15px;

        top: 0;
    }

    .news-ticker {
        height: 60px;
        min-width: 0;
    }

    .news-track a {
        font-size: clamp(13px, 4vw, 16px);
    }


    /* ---------------------------------------------------------
       FULL WIDTH IMAGE
       --------------------------------------------------------- */

    .imagedata {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: visible !important;
    }

    .imagedata picture {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }

    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        object-fit: initial !important;
    }


    /* ---------------------------------------------------------
       BUTTON
       --------------------------------------------------------- */

    .btn-log {
        width: 100% !important;

        margin: 0 !important;

        padding: 15px 20px 20px !important;

        background: #fff;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        z-index: 10;
    }

    .btn-log .btn-data {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 14px 8px !important;

        font-size: clamp(16px, 4.5vw, 20px);

        line-height: 1.3;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   320px - 359px
   ========================================================= */

@media screen and (max-width: 359px) {

    .breakingNews {
        height: 40px;
    }

    .bn-red .bn-title {
        height: 52px;
        padding: 0 14px;
    }

    .bn-title h2 {
        font-size: 17px;
    }

    .bn-title span {
        border-width: 26px 0 26px 12px;
        right: -12px;
    }

    .news-ticker {
        height: 52px;
    }

    .news-track a {
        font-size: 12px;
    }

    .btn-log {
        padding: 10px 12px 15px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   360px - 389px
   ========================================================= */

@media screen and (min-width: 360px) and (max-width: 389px) {

    .breakingNews {
        height: 56px;
    }

    .bn-red .bn-title {
        height: 56px;
        padding: 0 16px;
    }

    .bn-title h2 {
        font-size: 19px;
    }

    .bn-title span {
        border-width: 28px 0 28px 13px;
        right: -13px;
    }

    .news-ticker {
        height: 56px;
    }

}


/* =========================================================
   NORMAL MOBILE
   390px - 430px
   ========================================================= */

@media screen and (min-width: 390px) and (max-width: 430px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 20px;
    }

    .bn-title h2 {
        font-size: 21px;
    }

    .bn-title span {
        border-width: 30px 0 30px 15px;
        right: -15px;
    }

}


/* =========================================================
   LARGE MOBILE / SMALL TABLET
   431px - 600px
   ========================================================= */

@media screen and (min-width: 431px) and (max-width: 600px) {

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 22px;
    }

    .bn-title h2 {
        font-size: 22px;
    }

}


/* =========================================================
   TABLET PORTRAIT
   601px - 768px
   ========================================================= */

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

    .breakingNews {
        height: 60px;
    }

    .bn-red .bn-title {
        height: 60px;
        padding: 0 25px;
    }

    .bn-title h2 {
        font-size: 24px;
    }

    .news-track a {
        font-size: 16px;
    }
 

    .btn-log {
        padding: 15px 30px 20px !important;
    }

    .btn-log .btn-data {
        max-width: 500px !important;
    }

}


/* =========================================================
   EXTRA SAFETY FOR MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
    }

    img {
        max-width: 100%;
    }

}

/* =========================================================
   FINAL VIEWPORT FIX
   NO VERTICAL PAGE SCROLL + ANIMATED CTA BUTTON
   ========================================================= */

/* Keep the complete page inside the visible screen */
html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

body {
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Header must keep only the space it actually needs */
body > header {
    flex: 0 0 auto;
}

/* Hero takes only the remaining viewport height */
.hero-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.top-nav,
.breakingNews {
    flex: 0 0 auto;
}

/* Image area automatically fits the remaining free space */
.imagedata {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    background: #001a32;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.imagedata picture {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.imagedata img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Bottom button area stays inside viewport */
.btn-log {
    width: 100% !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 16px 12px !important;
    background: #fff;
    text-align: center;
    position: relative !important;
    z-index: 20;
}

/* Modern animated CTA */
.btn-log .btn-data {
    position: relative;
    isolation: isolate;
    width: min(100%, 500px) !important;
    min-height: 54px;
    margin: 0 auto !important;
    padding: 14px 58px 14px 28px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-radius: 999px !important;
    overflow: hidden;

    color: #fff !important;
    text-decoration: none !important;
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 700;
    letter-spacing: .25px;

    background:
        linear-gradient(120deg, #17175d 0%, #292993 48%, #f44a56 100%) !important;

    box-shadow:
        0 10px 24px rgba(33, 33, 103, .24),
        inset 0 1px 0 rgba(255, 255, 255, .22);

    transform: translateZ(0);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease;
}

/* Soft moving shine */
.btn-log .btn-data::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -45%;
    width: 34%;
    height: 240%;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .12),
        rgba(255, 255, 255, .72),
        rgba(255, 255, 255, .12),
        transparent
    );
    animation: buttonShine 3s ease-in-out infinite;
}

/* Animated arrow */
.btn-log .btn-data::after {
    content: "→";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    animation: buttonArrow 1.15s ease-in-out infinite;
}

.btn-log .btn-data:hover,
.btn-log .btn-data:focus-visible {
    transform: translateY(-2px) scale(1.012);
    box-shadow:
        0 14px 30px rgba(33, 33, 103, .30),
        0 4px 14px rgba(244, 74, 86, .18);
    filter: saturate(1.08);
}

.btn-log .btn-data:active {
    transform: translateY(0) scale(.985);
}

.btn-log .btn-data:focus-visible {
    outline: 3px solid rgba(244, 74, 86, .28) !important;
    outline-offset: 3px;
}

@keyframes buttonShine {
    0%, 18% {
        left: -45%;
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    58% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes buttonArrow {
    0%, 100% {
        transform: translate(-2px, -50%);
    }

    50% {
        transform: translate(5px, -50%);
    }
}

/* Mobile viewport tuning */
@media screen and (max-width: 768px) {
    html,
    body {
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
    }

    body {
        height: 100vh;
        height: 100dvh;
        min-height: 0 !important;
    }

    .hero-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .imagedata,
    .imagedata picture {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .imagedata img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .btn-log {
        flex: 0 0 auto !important;
        padding: 8px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .btn-log .btn-data {
        width: 100% !important;
        max-width: 500px !important;
        min-height: 50px;
        padding: 12px 52px 12px 22px !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        line-height: 1.2;
    }

    .btn-log .btn-data::after {
        right: 19px;
        font-size: 23px;
    }
}

/* Very short mobile screens */
@media screen and (max-width: 768px) and (max-height: 700px) {
    .breakingNews {
        height: 44px !important;
    }

    .bn-red .bn-title {
        height: 44px !important;
        padding: 0 14px !important;
    }

    .bn-title h2 {
        font-size: 17px !important;
    }

    .bn-title span {
        border-width: 22px 0 22px 11px !important;
        right: -11px !important;
    }

    .news-ticker {
        height: 44px !important;
    }

    .btn-log {
        padding-top: 6px !important;
        padding-bottom: calc(23px + env(safe-area-inset-bottom)) !important;
    }

    .btn-log .btn-data {
        min-height: 46px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Accessibility: avoid forced animation when user requests less motion */
@media (prefers-reduced-motion: reduce) {
    .btn-log .btn-data,
    .btn-log .btn-data::before,
    .btn-log .btn-data::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   FINAL IMAGE NO-CROP SAFEGUARD
   Entire hero artwork remains visible on desktop + mobile.
   ========================================================= */
.hero-container,
.imagedata,
.imagedata picture {
    min-height: 0 !important;
}

.imagedata {
    /*display: flex !important;*/
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.imagedata picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.imagedata img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Mobile source also stays completely visible */
@media screen and (max-width: 768px) {
    .imagedata,
    .imagedata picture,
    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .imagedata img {
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* =========================================================
   DESKTOP / WEB RESTORE
   Keep web image/layout like the original code.
   Mobile (<= 768px) is intentionally NOT changed here.
   ========================================================= */
@media screen and (min-width: 769px) {

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block !important;
        background: #fff !important;
    }

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .top-nav,
    .breakingNews {
        flex: none !important;
    }

    .imagedata {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .imagedata picture {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .imagedata img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: initial !important;
        object-position: initial !important;
    }

    /* Keep redesigned animated CTA, but let it sit normally after the image */
    .btn-log {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 30px 20px !important;
        position: relative !important;
    }
}


/* =========================================================
   THE PEOPLE PROJECT IMAGE BUTTON
   ========================================================= */

.btn-log {
    width: 100%;
    margin: 0;
    padding: 15px 30px 20px;
    background: #fff;
    text-align: center;
}

.people-project-btn {
    position: relative !important;

    display: inline-block !important;

    width: min(100%, 500px) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;
    outline: none !important;

    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;

    overflow: hidden;

    /* Arrow completely removed */
    font-size: 0;
    line-height: 0;

    cursor: pointer;
}


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

.people-project-image {
    display: block;

    width: 25%;
    max-width: 500px;

    height: auto;

    margin: 0 auto;
    padding: 0;

    border: 0;
    outline: none;

    object-fit: contain;

    cursor: pointer;

    /* truth3.jpeg must remain static */
    animation: none !important;

    transform: none !important;
    transform-origin: center center;

    transition: none !important;
}


/* =========================================================
   IMAGE ANIMATION
   ========================================================= */

@keyframes peopleProjectAnimation {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }

}


/* Hover */
.people-project-btn:hover .people-project-image {
    transform: none !important;
}


/* =========================================================
   REMOVE ALL ARROW / PSEUDO ELEMENTS
   ========================================================= */

.people-project-btn::before,
.people-project-btn::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    .btn-log {
        width: 100% !important;

      
    }

    .people-project-btn {
        width: 100% !important;
        max-width: 500px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    .people-project-image {
        /* Same clean size on all mobile screens */
        width: 150px !important;
        max-width: calc(100vw - 24px) !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    .btn-log {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .people-project-image {
        width: 150px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

}


/* =========================================================
   VERY SHORT MOBILE
   ========================================================= */

@media screen and (max-width: 768px) and (max-height: 700px) {

    .btn-log {
        padding-top: 6px !important;
        padding-bottom:
            calc(7px + env(safe-area-inset-bottom))
            !important;
    }

    .people-project-image {
        width: 150px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
        object-fit: contain !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

}


/* =========================================================
   MOBILE IMAGE - FULL WIDTH / NO BACKGROUND
   ========================================================= */
@media screen and (max-width: 768px) {
    .imagedata {
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
    }

    .imagedata img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: transparent !important;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    .people-project-image {
        animation: none !important;
        transition: none !important;
    }

}


/* =========================================================
   FINAL RESPONSIVE truth3.jpeg FIX
   IMPORTANT: Keep this block at the VERY END of <style>.
   Mobile only. Desktop/tablet remain unchanged.
   ========================================================= */

/* Disable animation permanently for truth3.jpeg */
.people-project-image,
.people-project-btn:hover .people-project-image,
.people-project-btn:focus .people-project-image,
.people-project-btn:active .people-project-image {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Extra Small Mobile - 320px and below */
@media screen and (max-width: 320px) {
    .btn-log {
        width: 100% !important;
        height: 92px !important;
        min-height: 92px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 140px !important;
        height: 72px !important;
        max-width: 140px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 140px !important;
        height: 72px !important;
        max-width: 140px !important;
        max-height: 72px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Small Mobile - 321px to 375px */
@media screen and (min-width: 321px) and (max-width: 375px) {
    .btn-log {
        width: 100% !important;
        height: 96px !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 150px !important;
        height: 76px !important;
        max-width: 150px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 150px !important;
        height: 76px !important;
        max-width: 150px !important;
        max-height: 76px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Mobile - 376px to 425px */
@media screen and (min-width: 376px) and (max-width: 425px) {
    .btn-log {
        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 160px !important;
        height: 80px !important;
        max-width: 160px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 160px !important;
        height: 80px !important;
        max-width: 160px !important;
        max-height: 80px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Large Mobile - 426px to 575px */
@media screen and (min-width: 426px) and (max-width: 575px) {
    .btn-log {
        width: 100% !important;
        height: 104px !important;
        min-height: 104px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .btn-log a,
    .people-project-btn {
        width: 170px !important;
        height: 84px !important;
        max-width: 170px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 170px !important;
        height: 84px !important;
        max-width: 170px !important;
        max-height: 84px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Common safety for ALL mobile devices */
@media screen and (max-width: 575px) {
    body {
        overflow-x: hidden !important;
    }

    .btn-log {
        box-sizing: border-box !important;
        background: #fff !important;
        text-align: center !important;
    }

    .btn-log a,
    .people-project-btn {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .people-project-image {
        position: static !important;
        float: none !important;
        border: 0 !important;
        outline: 0 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
   FINAL MOBILE-ONLY FIX
   Remove the white area contained at the bottom of webdate.jpeg
   Desktop / Web view remains unchanged.
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Crop only the mobile hero image */
    .imagedata {
        width: 100% !important;
        height: 138vw !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061a2e !important;
        display: block !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        background: #061a2e !important;
    }

    .imagedata img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        object-fit: cover !important;
        object-position: top center !important;
        background: #061a2e !important;
    }

    /* Truth section */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 5px 0 7px !important;
        background: #061a2e !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 65px !important;
        height: auto !important;
        max-width: 65px !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 320px - 380px */
@media screen and (max-width: 380px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 4px 0 6px !important;
        background: #061a2e !important;
    }

    .people-project-image {
        width: 60px !important;
        max-width: 60px !important;
    }
}

/* 381px - 768px */
@media screen and (min-width: 381px) and (max-width: 768px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 5px 0 7px !important;
        background: #061a2e !important;
    }

    .people-project-image {
        width: 65px !important;
        max-width: 65px !important;
    }
}


/* =========================================================
   FINAL MOBILE ONLY FIX
   - Keep 4-side border of webdate.jpeg visible
   - Crop only the unwanted bottom white area
   - Increase truth3.jpeg size
   - Desktop / Web view remains unchanged
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Mobile hero: keep full width and crop only from bottom */
    .imagedata {
        width: 100% !important;
        height: 138vw !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #061a2e !important;
        display: block !important;
    }

    .imagedata picture {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .imagedata img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;

        /* Do NOT use cover: it can cut the left/right border */
        object-fit: initial !important;
        object-position: top center !important;
    }

    /* Bottom truth section */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px 0 8px !important;
        background: #061a2e !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

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

        background: transparent !important;
        overflow: visible !important;
    }

    /* Increased truth3.jpeg size */
    .people-project-image {
        width: 105px !important;
        height: auto !important;
        max-width: 105px !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;

        object-fit: contain !important;
        object-position: center center !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 380px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 5px 0 7px !important;
        background: #b87612!important;
    }

    .people-project-image {
        width: 95px !important;
        max-width: 95px !important;
    }
}


/* =========================================================
   381px - 768px
   ========================================================= */

@media screen and (min-width: 381px) and (max-width: 768px) {

    .imagedata {
        height: 138vw !important;
    }

    .btn-log {
        padding: 6px 0 8px !important;
        background: #b87612 !important;
    }

    .people-project-image {
        width: 105px !important;
        max-width: 105px !important;
    }
}


/* =========================================================
   PEOPLE REPORT DATA - WEB + MOBILE
   Existing body images are replaced by report data.
   ========================================================= */

.people-report-content {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 18px 24px 24px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.people-report-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: center !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.people-report-main {
    width: min(100%, 850px) !important;
    margin: 0 auto !important;
    /*display: grid !important;*/
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    column-gap: 40px !important;
}

.people-report-visual {
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.justice-icon {
    font-family: "Times New Roman", serif !important;
    font-size: clamp(150px, 18vw, 260px) !important;
    line-height: .8 !important;
    color: #a96d18 !important;
    transform: scaleX(.78) !important;
    user-select: none !important;
}

.people-report-score {
    text-align: center !important;
}

.people-report-percentage {
    color: #df2b21 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(56px, 7vw, 92px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.people-report-percentage span {
    /*font-size: .42em !important;*/
    vertical-align: top !important;
    margin-left: 2px !important;
}

.people-report-caption {
    margin-top: 8px !important;
    color: #14274a !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(14px, 1.5vw, 20px) !important;
    font-weight: 400 !important;
}

.people-report-options {
    width: min(100%, 850px) !important;
    margin: 18px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.people-report-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}

.people-report-option input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    margin: 0 !important;
    border: 2px solid #24395d !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.people-report-option input:checked {
    box-shadow: inset 0 0 0 4px #fff !important;
    background: #24395d !important;
}

/* Mobile */
@media screen and (max-width: 768px) {

    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 20px 18px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .people-report-title {
        margin: 0 0 14px !important;
        font-size: clamp(25px, 7vw, 32px) !important;
    }

    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 8px !important;
    }

    .people-report-visual {
        min-height: 215px !important;
    }

    .justice-icon {
        font-size: clamp(135px, 40vw, 185px) !important;
    }

    .people-report-percentage {
        font-size: clamp(50px, 15vw, 70px) !important;
    }

    .people-report-caption {
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    .people-report-options {
        width: 100% !important;
        margin: 12px auto 0 !important;
        gap: 6px !important;
    }

    .people-report-option {
        gap: 9px !important;
        font-size: 14px !important;
    }

    .people-report-option input {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {

    .people-report-content {
        padding: 0px 2px 2px !important;
    }

    .people-report-title {
        font-size: 25px !important;
        margin-bottom: 12px !important;
    }

    .people-report-visual {
        min-height: 200px !important;
    }

    .justice-icon {
        font-size: 130px !important;
    }

    .people-report-percentage {
        font-size: 48px !important;
    }

    .people-report-caption {
        font-size: 11px !important;
    }

    .people-report-option {
        font-size: 13px !important;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
    .people-report-content {
        min-height: 430px !important;
    }
}


/* =========================================================
   NEW1.PNG - INCREASE IMAGE SIZE
   ========================================================= */

.mobile-report-logo {
    width: 280px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 172px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 122px !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/* =========================================================
   NEW1.PNG SIZE + VERTICAL LINE BETWEEN LOGO AND TITLE
   ========================================================= */

/* Smaller logo */
.mobile-report-logo {
    width: 190px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Center vertical line between top logo and The People Report */
.people-report-logo-divider {
    width: 2px !important;
    height: 28px !important;
    margin: 6px auto 8px !important;
    background: #000 !important;
    display: block !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 150px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .people-report-logo-divider {
        width: 2px !important;
        height: 24px !important;
        margin: 5px auto 7px !important;
    }
}

/* Small mobile */
@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 140px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .people-report-logo-divider {
        height: 22px !important;
        margin: 4px auto 6px !important;
    }
}


/* =========================================================
   HORIZONTAL LINE BETWEEN TOP LOGO AND THE PEOPLE REPORT
   ========================================================= */

.people-report-logo-divider {
    width: 220px !important;
    height: 2px !important;
    margin: 7px auto 9px !important;
    background: #000 !important;
    display: block !important;
}

@media screen and (max-width: 768px) {
    .people-report-logo-divider {
        width: 180px !important;
        height: 2px !important;
        margin: 5px auto 7px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-logo-divider {
        width: 160px !important;
        height: 2px !important;
        margin: 4px auto 6px !important;
    }
}


/* =========================================================
   FULL VIEWPORT-WIDTH HORIZONTAL LINE BELOW TOP LOGO
   ========================================================= */

.people-report-logo-divider {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 2px !important;
    margin: 7px 0 9px !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #000 !important;
    display: block !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 5px 0 7px !important;
        margin-left: calc(50% - 50vw) !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 4px 0 6px !important;
        margin-left: calc(50% - 50vw) !important;
    }
}



/* =========================================================
   FINAL MOBILE UPDATE
   - Increase Assets/Logo/new1.png size on mobile
   - Increase radio button text size
   - Desktop/Web remains unchanged
   ========================================================= */

@media screen and (max-width: 768px) {
    .mobile-report-logo {
        width: 220px !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .people-report-option {
        font-size: 18px !important;
        line-height: 1.35 !important;
        gap: 11px !important;
    }

    .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 205px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .people-report-option {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .people-report-option input {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }
}



/* =========================================================
   FINAL PEOPLE REPORT BOX + TEXT SIZE UPDATE
   - The People Report + Truth in our Democracy in one box
   - Truth in our Democracy centered and bold
   - Radio text increased
   ========================================================= */

.people-report-heading-box {
    width: min(100%, 760px) !important;
    margin: 0 auto 22px !important;
    padding: 20px 24px 18px !important;
    text-align: center !important;
    background: #fff !important;
    border: 2px solid #172747 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 16px rgba(23, 39, 71, .12) !important;
    box-sizing: border-box !important;
}

.people-report-heading-box .people-report-title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: clamp(30px, 3.2vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.people-report-heading-box .people-report-caption {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #14274a !important;
    font-size: clamp(20px, 2vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.people-report-option {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    gap: 12px !important;
}

.people-report-option input {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
}

@media screen and (max-width: 768px) {
    .people-report-heading-box {
        width: 70% !important;
        margin: 16px auto 18px !important;
        padding: 16px 14px 15px !important;
        border-width: 2px !important;
        border-radius: 12px !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: clamp(27px, 8vw, 34px) !important;
    }

    .people-report-heading-box .people-report-caption {
        margin-top: 8px !important;
        font-size: clamp(19px, 5.5vw, 25px) !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    .people-report-option {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        gap: 11px !important;
    }

    .people-report-option input {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box {
        padding: 14px 10px 13px !important;
        margin-bottom: 16px !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: 27px !important;
    }

    .people-report-heading-box .people-report-caption {
        font-size: 24px !important;
    }

    .people-report-option {
        font-size: 19px !important;
    }

    .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }
}



/* =========================================================
   FINAL PEOPLE REPORT DROPDOWN + DIVIDER SPACING
   ========================================================= */

/* Remove all top padding around the logo/divider area */
.people-report-content {
    padding-top: 0 !important;
}

/* Logo divider: no padding and minimum spacing */
.people-report-logo-divider {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Dropdown below the percentage */
.people-report-dropdown {
    width: min(100%, 850px) !important;
    margin: 14px auto 0 !important;
    position: relative !important;
}

.people-report-dropdown-toggle {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 2px solid #172747 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Left-side dropdown icon */
.people-report-dropdown-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #172747 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: transform .2s ease !important;
}

/* Rotate icon when dropdown is open */
.people-report-dropdown-toggle[aria-expanded="true"] .people-report-dropdown-icon {
    transform: rotate(180deg) !important;
}

/* Hidden by default */
.people-report-options[hidden] {
    display: none !important;
}

/* Open radio options */
.people-report-dropdown .people-report-options {
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border: 1px solid #d7dce5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(23, 39, 71, .10) !important;
}

.people-report-dropdown .people-report-option {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    color: #172747 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.people-report-dropdown .people-report-option input {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    .people-report-content {
        padding-top: 0 !important;
    }

    .people-report-logo-divider {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        padding: 0 !important;
    }

    .people-report-dropdown {
        margin-top: 10px !important;
    }

    .people-report-dropdown-toggle {
        min-height: 48px !important;
        padding: 8px 12px !important;
        font-size: 18px !important;
    }

    .people-report-dropdown-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 20px !important;
    }

    .people-report-dropdown .people-report-options {
        padding: 8px 10px !important;
        gap: 5px !important;
    }

    .people-report-dropdown .people-report-option {
        padding: 6px 2px !important;
        font-size: 17px !important;
        gap: 9px !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-dropdown {
        margin-top: 8px !important;
    }

    .people-report-dropdown-toggle {
        min-height: 45px !important;
        font-size: 17px !important;
    }

    .people-report-dropdown .people-report-option {
        font-size: 16px !important;
    }
}



/* =========================================================
   FINAL MOBILE PEOPLE REPORT DESIGN
   ========================================================= */
.mobile-report-arrow-btn {
    display: none !important;
}

.people-report-modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.people-report-modal-content .modal-header {
    background: #172747 !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.people-report-modal-content .modal-title {
    font-weight: 700 !important;
}

.people-report-modal-content .btn-close {
    filter: brightness(0) invert(1);
}

.people-report-modal-content .modal-body {
    padding: 18px !important;
}

.people-report-modal-content .people-report-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 10px 6px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

@media screen and (max-width: 768px) {
    /* Better heading box */
    .people-report-heading-box {
        width: 80% !important;
        margin: 0 auto 14px !important;
        padding: 10px 12px !important;
        border: 1px solid #172747 !important;
        border-radius: 10px !important;
               background: linear-gradient(180deg, #172747 0%, #172747 100%) !important;
        box-shadow: 0 3px 10px rgba(23, 39, 71, .10) !important;
    }

    .people-report-heading-box .people-report-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: .2px !important;
    }

    /* Keep logo centered and increase its size */
    .mobile-report-logo {
        width: 220px !important;
        max-width: calc(100vw - 30px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Image first, then percentage row */
    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .people-report-visual {
        width: 100% !important;
    }

    /* Arrow left + percentage/caption right */
    .people-report-score {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        align-items: center !important;
        column-gap: 8px !important;
        text-align: right !important;
        padding: 4px 2px 0 !important;
    }

    .mobile-report-arrow-btn {
        display: inline-flex !important;
        width: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #172747 !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(23,39,71,.20) !important;
        cursor: pointer !important;
    }

    .mobile-report-arrow-btn span {
        display: block !important;
        font-size: 28px !important;
        line-height: 1 !important;
        transform: translateY(-2px) !important;
    }

    .people-report-percentage {
        text-align: right !important;
        font-size: 48px !important;
        line-height: .95 !important;
        margin: 0 !important;
    }

    .people-report-caption {
        grid-column: 2 !important;
        text-align: right !important;
        margin: 3px 0 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
    }

    /* Desktop dropdown stays available on desktop, hidden on mobile */
    .people-report-dropdown {
        display: none !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box .people-report-title {
        font-size: 20px !important;
    }

    .mobile-report-logo {
        width: 210px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .people-report-score {
        grid-template-columns: 50px 1fr !important;
    }

    .mobile-report-arrow-btn {
        width: 43px !important;
        height: 43px !important;
    }

    .people-report-percentage {
        font-size: 44px !important;
    }

    .people-report-caption {
        font-size: 15px !important;
    }
}


/* FINAL MOBILE PEOPLE REPORT OVERRIDES */
@media screen and (max-width: 768px) {
    .mobile-report-logo { width: 220px !important; max-width: calc(100vw - 24px) !important; height: auto !important; }
    .mobile-people-report-controls { width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
    .mobile-people-report-arrow { width:34px !important; height:34px !important; min-width:34px !important; padding:0 !important; border:1px solid #222 !important; border-radius:4px !important; background:#fff !important; color:#222 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:20px !important; line-height:1 !important; box-shadow:none !important; }
    .mobile-people-report-score { margin-left:auto !important; text-align:right !important; flex:0 0 auto !important; }
    .mobile-people-report-score .people-report-percentage { font-size:52px !important; line-height:.95 !important; }
    .mobile-people-report-score .people-report-caption { font-size:20px !important; line-height:1.2 !important; white-space:nowrap !important; }
}
@media screen and (max-width:380px) {
    .mobile-report-logo { width:205px !important; max-width:calc(100vw - 24px) !important; }
    .mobile-people-report-score .people-report-percentage { font-size:46px !important; }
    .mobile-people-report-score .people-report-caption { font-size:20px !important; }
}


/* =========================================================
   FINAL MOBILE PEOPLE REPORT POSITION + LOGO SIZE
   ========================================================= */
@media screen and (max-width: 768px) {

    /* Increase the People Report top logo */
    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
    }

    /* Percentage LEFT, simple dropdown arrow RIGHT */
    .mobile-people-report-controls {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mobile-people-report-score {
        order: 1 !important;
        margin: 0 !important;
        text-align: left !important;
        flex: 1 1 auto !important;
    }

    .mobile-people-report-arrow {
        order: 2 !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        margin-left: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #222 !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .mobile-people-report-arrow:focus,
    .mobile-people-report-arrow:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .mobile-people-report-score .people-report-percentage {
        font-size: 55px !important;
        line-height: .95 !important;
        text-align: left !important;
    }

    .mobile-people-report-score .people-report-caption {
        font-size: 15px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-logo {
        width: 215px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .mobile-people-report-score .people-report-percentage {
        font-size: 48px !important;
    }
}



/* =========================================================
   FINAL MOBILE PEOPLE REPORT LAYOUT
   - Percentage LEFT
   - Arrow RIGHT
   - Truth in our Democracy CENTERED BELOW IMAGE
   - Mobile only; desktop unchanged
   ========================================================= */
@media screen and (max-width: 768px) {

    .people-report-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 4px !important;
    }

    .people-report-score {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        text-align: left !important;
    }

    .people-report-percentage {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: #df2b21 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 55px !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        letter-spacing: -1px !important;
    }

    .mobile-report-arrow-btn {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #172747 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .mobile-report-arrow-btn span {
        display: block !important;
        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: translateY(-3px) !important;
    }

    .people-report-caption {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        color: #14274a !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .2px !important;
    }
}

@media screen and (max-width: 380px) {

    .mobile-report-logo {
        width: 215px !important;
        max-width: calc(100vw - 18px) !important;
    }

    .people-report-percentage {
        font-size: 48px !important;
    }

    .mobile-report-arrow-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .mobile-report-arrow-btn span {
        font-size: 30px !important;
    }

    .people-report-caption {
        font-size: 17px !important;
    }
}



/* =========================================================
   FINAL MOBILE FIX
   - Percentage CENTER
   - Arrow remains RIGHT
   - Everything else unchanged
   - Mobile only
   ========================================================= */
@media screen and (max-width: 768px) {

    .people-report-score {
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
    }

    .people-report-score .people-report-percentage {
        width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .mobile-report-arrow-btn {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    .mobile-report-arrow-btn span {
        display: inline-block !important;
    }
}

@media screen and (max-width: 380px) {

    .people-report-score .people-report-percentage {
        text-align: center !important;
    }

    .mobile-report-arrow-btn {
        right: 0 !important;
    }
}


/* =========================================================
   FINAL MOBILE PEOPLE REPORT SPACING + CAPTION SIZE
   ========================================================= */
@media screen and (max-width: 768px) {

    /* Add visible gap between the top line and the People Report title box */
    .people-report-heading-box {
        margin-top: 12px !important;
    }

    /* Increase Truth in our Democracy text */
    .people-report-caption {
        font-size: 20px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-heading-box {
        margin-top: 10px !important;
    }

    .people-report-caption {
        font-size: 20px !important;
    }
}



/* =========================================================
   FINAL MOBILE FIX - TRUTH IN OUR DEMOCRACY TITLE 25PX
   Desktop / Web view remains unchanged.
   ========================================================= */
@media screen and (max-width: 768px) {
    .people-report-caption {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }
}

@media screen and (max-width: 380px) {
    .people-report-caption {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }
}



/* =========================================================
   FINAL MOBILE TRIANGLE DROPDOWN ICON
   Replace the old down-chevron with a clean triangle.
   ========================================================= */
@media screen and (max-width: 768px) {
    .mobile-report-arrow-btn span {
        width: 0 !important;
        height: 0 !important;
        display: block !important;
        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-top: 12px solid #172747 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: none !important;
    }
}

@media screen and (max-width: 380px) {
    .mobile-report-arrow-btn span {
        border-left-width: 8px !important;
        border-right-width: 8px !important;
        border-top-width: 10px !important;
    }
}


/* =========================================================
   FINAL WEB/DESKTOP UPDATE
   - Desktop/Web follows the same visual layout as Mobile
   - Mobile styles are NOT changed
   - Web page uses normal vertical scrolling
   - Content/order is preserved
   ========================================================= */

@media screen and (min-width: 769px) {

    /* ---------------------------------------------------------
       PAGE / VERTICAL SCROLL
       --------------------------------------------------------- */
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        display: block !important;
        background: #fff !important;
    }

    .hero-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    /* ---------------------------------------------------------
       PEOPLE REPORT MAIN SECTION
       Same stacked arrangement as mobile
       --------------------------------------------------------- */
    .people-report-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 24px 28px !important;
        background: #fff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Full-width divider */
    .people-report-logo-divider {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 2px !important;
        margin: 0 0 12px !important;
        margin-left: calc(50% - 50vw) !important;
        padding: 0 !important;
        background: #000 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------
       THE PEOPLE REPORT HEADING BOX
       Match mobile visual style
       --------------------------------------------------------- */
    .people-report-heading-box {
        width: min(80%, 560px) !important;
        margin: 0 auto 18px !important;
        padding: 12px 18px !important;
        border: 1px solid #172747 !important;
        border-radius: 10px !important;
        background: linear-gradient(
            180deg,
            #172747 0%,
            #172747 100%
        ) !important;
        box-shadow: 0 3px 10px rgba(23, 39, 71, .10) !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .people-report-heading-box .people-report-title {
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: .2px !important;
        text-align: center !important;
    }

    /* ---------------------------------------------------------
       STACKED MOBILE-STYLE MAIN CONTENT
       --------------------------------------------------------- */
    .people-report-main {
        width: min(100%, 700px) !important;
        max-width: 700px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------
       TOP LOGO
       --------------------------------------------------------- */
    .mobile-report-logo {
        width: 230px !important;
        max-width: calc(100vw - 40px) !important;
        height: auto !important;
        margin: 0 auto 4px !important;
        padding: 0 !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* ---------------------------------------------------------
       PERCENTAGE + ARROW
       Mobile-style centered percentage with arrow on right
       --------------------------------------------------------- */
    .people-report-score {
        width: min(100%, 560px) !important;
        position: relative !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .people-report-score .people-report-percentage {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        color: #df2b21 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 55px !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        letter-spacing: -1px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .people-report-score .people-report-percentage span {
        vertical-align: top !important;
        margin-left: 2px !important;
    }

    /* Make the same mobile arrow available on web */
    .mobile-report-arrow-btn {
        display: inline-flex !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #172747 !important;
        box-shadow: none !important;

        cursor: pointer !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .mobile-report-arrow-btn span {
        width: 0 !important;
        height: 0 !important;
        display: block !important;

        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-top: 12px solid #172747 !important;

        font-size: 0 !important;
        line-height: 0 !important;
        transform: none !important;
    }

    /* ---------------------------------------------------------
       TRUTH IN OUR DEMOCRACY
       --------------------------------------------------------- */
    .people-report-main > .people-report-caption,
    .people-report-caption {
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;

        color: #14274a !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .2px !important;

        text-align: center !important;
    }

    /* ---------------------------------------------------------
       KEEP DESKTOP CONTENT AVAILABLE
       The mobile screen hides the old dropdown, but on web
       the same choices remain available below the main content
       so nothing is lost.
       --------------------------------------------------------- */
    .people-report-dropdown {
        width: min(100%, 700px) !important;
        margin: 14px auto 0 !important;
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .people-report-dropdown-toggle {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 8px 12px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;

        border: 1px solid #172747 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #172747 !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: left !important;

        cursor: pointer !important;
        box-shadow: none !important;
    }

    .people-report-dropdown-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;
        background: #172747 !important;
        color: #fff !important;

        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .people-report-dropdown .people-report-options {
        width: 100% !important;
        margin: 7px 0 0 !important;
        padding: 8px 10px !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;

        border: 1px solid #d7dce5 !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-sizing: border-box !important;

        box-shadow: 0 4px 12px rgba(23, 39, 71, .10) !important;
    }

    .people-report-dropdown .people-report-options[hidden] {
        display: none !important;
    }

    .people-report-dropdown .people-report-option {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;

        margin: 0 !important;
        padding: 6px 2px !important;

        color: #172747 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    .people-report-dropdown .people-report-option input {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        margin: 0 !important;
    }

    /* ---------------------------------------------------------
       BOTTOM HAND / PEOPLE PROJECT IMAGE
       Keep it in normal document flow so web scrolls vertically
       --------------------------------------------------------- */
    .btn-log {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 8px 0 14px !important;

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

        background: #b87612 !important;
        text-align: center !important;

        position: relative !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .btn-log > a,
    .btn-log .people-project-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

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

        background: transparent !important;
        overflow: visible !important;
    }

    .people-project-image {
        width: 105px !important;
        max-width: 105px !important;
        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;

        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* ---------------------------------------------------------
       EXTRA-WIDE DESKTOP
       Keep the design compact instead of stretching
       --------------------------------------------------------- */
    @media screen and (min-width: 1200px) {
        .people-report-heading-box {
            width: 560px !important;
        }

        .people-report-main {
            max-width: 700px !important;
        }

        .mobile-report-logo {
            width: 230px !important;
        }

        .people-report-score .people-report-percentage {
            font-size: 55px !important;
        }

        .people-report-caption {
            font-size: 25px !important;
        }
    }
}



/* =========================================================
   TRUTH SEEKERS POPUP - WEB + MOBILE
   Web: popup from percentage-side icon
   Mobile: existing Bootstrap popup remains unchanged
   ========================================================= */
@media screen and (min-width: 769px) {

    /* Remove standalone Truth Seekers button on web */
    .people-report-dropdown {
        display: none !important;
    }

    .people-report-score {
        position: relative !important;
    }

    /* Show the same icon on web */
    .mobile-report-arrow-btn {
        display: inline-flex !important;
        position: absolute !important;
        right: -48px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: #172747 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        z-index: 50 !important;
    }

    .mobile-report-arrow-btn span {
        width: 0 !important;
        height: 0 !important;
        display: block !important;

        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-top: 12px solid #172747 !important;

        font-size: 0 !important;
        line-height: 0 !important;
    }

    /* Popup styling for desktop */
    #truthSeekersModal .people-report-modal-content {
        border: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 15px 45px rgba(0,0,0,.22) !important;
    }

    #truthSeekersModal .modal-header {
        background: #172747 !important;
        color: #fff !important;
        border-bottom: 0 !important;
        padding: 16px 20px !important;
    }

    #truthSeekersModal .modal-title {
        color: #fff !important;
        font-size: 22px !important;
        font-weight: 700 !important;
    }

    #truthSeekersModal .modal-body {
        padding: 20px !important;
        background: #fff !important;
    }

    #truthSeekersModal .btn-close {
        filter: brightness(0) invert(1) !important;
    }

    #truthSeekersModal .people-report-option {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 4px !important;
        margin: 0 !important;
        color: #172747 !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }

    #truthSeekersModal .people-report-option input {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
    }
}

/* Mobile: do not change the existing popup behavior */
@media screen and (max-width: 768px) {
    .people-report-dropdown {
        display: none !important;
    }

    #truthSeekersModal {
        display: none;
    }

    #truthSeekersModal.show {
        display: block;
    }
}



/* =========================================================
   FINAL DESKTOP WEB UPDATE
   Bootstrap grid: LEFT IMAGE | RIGHT TEXT + PERCENTAGE
   IMPORTANT: Mobile view is not changed.
   ========================================================= */
@media screen and (min-width: 769px) {

    /* Hide the old stacked report layout only on web */
    .people-report-main {
        display: none !important;
    }

    /* Desktop Bootstrap row */
    .people-report-desktop-grid {
        width: min(100%, 1100px) !important;
        max-width: 1100px !important;
        margin: 10px auto 20px !important;
        padding: 0 !important;
        min-height: 330px !important;
        align-items: center !important;
    }

    /* LEFT SIDE IMAGE */
    .people-report-desktop-image-col {
        min-height: 300px !important;
        padding: 20px 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .people-report-desktop-image {
        width: 340px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* RIGHT SIDE CONTENT */
    .people-report-desktop-info-col {
        min-height: 300px !important;
        padding: 20px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .people-report-desktop-caption {
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        color: #14274a !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: clamp(24px, 2.2vw, 34px) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .people-report-desktop-score {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .people-report-desktop-percentage {
        color: #df2b21 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: clamp(72px, 8vw, 115px) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .people-report-desktop-percentage span {
        vertical-align: top !important;
        margin-left: 3px !important;
    }

    /* WEB/DESKTOP DROPDOWN ARROW - restored */
    .people-report-desktop-score {
        position: relative !important;
    }

    .people-report-desktop-arrow {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10 !important;
        box-shadow: none !important;
    }

    .people-report-desktop-arrow span {
        width: 0 !important;
        height: 0 !important;
        display: block !important;
        border-left: 10px solid transparent !important;
        border-right: 10px solid transparent !important;
        border-top: 13px solid #172747 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transition: transform .2s ease !important;
    }

    .people-report-desktop-arrow:hover span {
        transform: translateY(2px) !important;
    }

    .people-report-desktop-arrow:focus,
    .people-report-desktop-arrow:active {
        outline: none !important;
        box-shadow: none !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 991px) {
    .people-report-desktop-grid {
        width: 100% !important;
        padding: 0 20px !important;
    }

    .people-report-desktop-image-col,
    .people-report-desktop-info-col {
        padding: 18px 24px !important;
    }

    .people-report-desktop-image {
        width: 280px !important;
    }

    .people-report-desktop-caption {
        font-size: 25px !important;
    }

    .people-report-desktop-percentage {
        font-size: 72px !important;
    }
}

/* Mobile: desktop grid is completely removed; existing mobile design stays intact. */
@media screen and (max-width: 768px) {
    .people-report-desktop-grid {
        display: none !important;
    }
}


/* =========================================================
   PARLIAMENT BACKGROUND - WEB / DESKTOP ONLY
   Mobile view is completely untouched.
   ========================================================= */
@media screen and (min-width: 769px) {

    body {
        position: relative !important;
        background: #ffffff !important;
    }

    body::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;

        background-image:
            linear-gradient(
                rgba(255, 255, 255, 0.84),
                rgba(255, 255, 255, 0.84)
            ),
            url("../../Logo/parliament-background.png") !important;

        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 700px auto !important;
    }

    /* Keep the report content slightly transparent
       so the Parliament can be seen softly behind it. */
    .people-report-content {
        background: rgba(255, 255, 255, 0.88) !important;
        position: relative !important;
    }
}



/* FINAL: Three-dots menu icon for desktop and mobile report score buttons */
.people-report-desktop-arrow span {
    width: auto !important;
    height: auto !important;
    display: block !important;
    border: 0 !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transform: translateY(-2px) !important;
}

.people-report-desktop-arrow:hover span {
    transform: translateY(-2px) !important;
}

.people-report-desktop-arrow:focus,
.people-report-desktop-arrow:active {
    outline: none !important;
    box-shadow: none !important;
}

.mobile-report-arrow-btn span {
    width: auto !important;
    height: auto !important;
    display: block !important;
    border: 0 !important;
    color: #172747 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transform: none !important;
}

@media screen and (max-width: 380px) {
    .mobile-report-arrow-btn span {
        font-size: 28px !important;
    }
}