.opportunitymarquee {
    display: inline-block;
    white-space: nowrap;
    padding: 15px 0;
    animation: marquee 20s linear infinite;
    font-family: 'inter-18pt';
    color: #ffffff;
    font-size: 14px;
    background: #0E1A28;
}

.hero {
    padding: 20px 20px 50px 20px;
    background: #F2EDE6;
}

.herosubtitlewrapper {
    display: flex;
}

.herosubtitle {
    padding-top: 20px;
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.6);
}

.herosubtitletwo {
    padding-top: 20px;
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: #D4571E;
    padding-left: 10px;
}

.herotitle {
    font-family: "inter-18pt";
    font-size: 70px;
    color: #000000;
    font-weight: 900;
    letter-spacing: -1.5px;
}

.herodivision {
    width: 10%;
    height: 2px;
    background: #D4571E;
}

.herodis {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    width: 80%;
    padding-top: 20px;
}

.filter {
    background: #E8E0D5;
    padding: 20px;    
}

.filtersubtitle {
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.6);
}

.filterwrapper {
    display: flex;
    gap: 15px;
    padding-top: 10px;
}

.filterbutton {
    padding: 5px 15px;
    border: #0E1A28 solid 0.8px;
    border-radius: 20px;
    font-family: "inter-18pt";
    font-size: 12px;
}

.filterbutton.active {
    background: #0E1A28;
    color: #ffffff;
}

.importantinsight {
    background: #0E1A28;
    padding: 20px 20px 0px 20px;
}

.topicsvg {
    width: 30%;
}

.importantinsightdivision {
    width: 10%;
    height: 2px;
    background: #D4571E;
    margin-top: 20px;
}

.importantinsighttitle {
    font-family: "inter-18pt";
    font-size: 30px;
    color: #ffffff;
    font-weight: 800;
    line-height: 35px;
    margin-top: 20px;
}

.importantinsightdis {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 10px;
}

.importantinsightsvg {
    width: 120%;
    margin-left: -10%;
    margin-top: 20px;
}
#article {
    background: #0E1A28;
    width: 100svw;
    margin-left: -20px;
}

.articlewrapper {
    padding: 20px;
    background: #F2EDE6;
}

.articlewrappertitle {
    display: flex;
    justify-content: space-between;
    font-family: "inter-18pt";
    font-size: 12px;
}

.articlewrapperdevision {
    width: 100svw;
    margin-left: -20px;
    height: 1px;
    background:  rgba(0, 0, 0, 0.4);
    margin-top: 20px;
}

.articlewrappertitleleft {
    color: #D4571E;
    font-weight: 700;
}

.articlewrappertitleright {
    color: rgba(0, 0, 0, 0.6);
}

.articlenumber {
    width: 65%;
    margin-top: 30px;
}

.articletitle {
    font-family: "inter-18pt";
    font-size: 23px;
    color: #000000;
    font-weight: 800;
    margin-top: 20px;
    line-height: 25px;
}

.articledis {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 20px;
}

.typeofarticlesvg {
    width: 85%;
    margin-top: 20px;
}

.question {
    padding: 20px;
    background: #0E1A28;
}

.questionsubtitle {
    font-family: "inter-18pt";
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}

.questiontitle {
    font-family: "inter-18pt";
    font-size: 30px;
    color: #ffffff;
    font-weight: 800;
    line-height: 35px;
    margin-top: 10px;
}

.questiondis {
    font-family: "inter-18pt";
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 10px;
}

.questionbutton {
    margin-top: 10px;
}

.questionbutton a {
    color: #D4571E;
    text-decoration: none;
    font-family: "inter-18pt";
    font-size: 16px;
}

.questionbutton a svg {
    margin-left: 5px;
    margin-top: 5px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (min-width: 650px) and (max-width: 1023px) {

    /* ==========================================================================
       INSIGHTS HERO SECTION
       ========================================================================== */
    .hero {
        padding: 40px 40px 60px 40px;
    }

    .herosubtitle,
    .herosubtitletwo {
        padding-top: 10px;
        font-size: 13px;
    }

    .herotitle {
        font-size: 86px;
        line-height: 82px;
        letter-spacing: -2px;
        margin-top: 10px;
    }

    .herodivision {
        width: 60px;
        margin-top: 15px;
    }

    .herodis {
        font-size: 18px;
        line-height: 26px;
        width: 75%;
        padding-top: 25px;
    }

    /* ==========================================================================
       OPPORTUNITY MARQUEE
       ========================================================================== */
    .opportunitymarquee {
        padding: 18px 0;
        font-size: 15px;
    }

    /* ==========================================================================
       FILTER CONTROLS
       ========================================================================== */
    .filter {
        padding: 30px 40px;    
    }

    .filtersubtitle {
        font-size: 13px;
    }

    .filterwrapper {
        gap: 12px;
        padding-top: 15px;
    }

    .filterbutton {
        padding: 6px 18px;
        font-size: 13px;
    }

    /* ==========================================================================
       FEATURED IMPORTANT INSIGHT CARD
       ========================================================================== */
    .importantinsight {
        padding: 60px 40px 0px 40px;
    }

    .topicsvg {
        width: 20%;
        max-width: 150px;
    }

    .importantinsightdivision {
        width: 60px;
        margin-top: 20px;
    }

    .importantinsighttitle {
        font-size: 42px;
        line-height: 48px;
        margin-top: 25px;
        max-width: 90%;
    }

    .importantinsightdis {
        font-size: 17px;
        line-height: 26px;
        margin-top: 15px;
        width: 80%;
    }

    .importantinsightsvg {
        width: 100%;
        margin-left: 0;
        margin-top: 40px;
    }

    /* ==========================================================================
       ARTICLES LIST FLOW
       ========================================================================== */
    #article {
        width: 100%;
        margin-left: 0;
        padding: 20px 0;
    }

    .articlewrapper {
        padding: 40px;
    }

    .articlewrappertitle {
        font-size: 13px;
    }

    .articlewrapperdevision {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    .articlenumber {
        width: 35%;
        max-width: 140px;
        margin-top: 25px;
    }

    .articletitle {
        font-size: 32px;
        line-height: 38px;
        margin-top: 20px;
        max-width: 90%;
    }

    .articledis {
        font-size: 16px;
        line-height: 25px;
        margin-top: 15px;
        width: 85%;
    }

    .typeofarticlesvg {
        width: 50%;
        max-width: 350px;
        margin-top: 30px;
    }

    /* ==========================================================================
       TOPIC ENQUIRY CTA SECTION
       ========================================================================== */
    .question {
        padding: 60px 40px;
    }

    .questionsubtitle {
        font-size: 13px;
    }

    .questiontitle {
        font-size: 42px;
        line-height: 48px;
        margin-top: 15px;
        max-width: 85%;
    }

    .questiondis {
        font-size: 17px;
        line-height: 26px;
        margin-top: 15px;
        width: 80%;
    }

    .questionbutton {
        margin-top: 25px;
    }

    .questionbutton a {
        font-size: 17px;
    }
}

@media (min-width: 1024px) {

    /* ==========================================================================
       1. INSIGHTS HERO SECTION
       ========================================================================== */
    .hero {
        padding: 80px 70px 100px 70px;
    }

    .herosubtitle,
    .herosubtitletwo {
        padding-top: 0;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .herotitle {
        font-size: 110px;        /* Authoritative brutalist type scale for desktop */
        line-height: 100px;      /* Prevent line overlap on large viewports */
        letter-spacing: -3px;
        margin-top: 15px;
    }

    .heredivision {
        width: 80px;
        height: 3px;
        margin-top: 25px;
    }

    .herodis {
        font-size: 22px;         
        line-height: 32px;
        width: 55%;
        max-width: 700px;
        padding-top: 35px;
    }

    .opportunitymarquee {
        padding: 22px 0;
        font-size: 16px;
    }

    .importantinsight {
        padding: 100px 70px 0px 70px;
        display: flex;
        flex-direction: row;
    }

    .topicsvg {
        width: 15%;
        max-width: 160px;
    }

    .importantinsightdivision {
        width: 80px;
        height: 3px;
        margin-top: 25px;
    }

    .importantinsighttitle {
        font-size: 56px;
        line-height: 62px;
        margin-top: 30px;
        max-width: 80%;
    }

    .importantinsightdis {
        font-size: 18px;
        line-height: 28px;
        margin-top: 20px;
        width: 60%;
        max-width: 750px;
    }

    .importantinsightsvg {
        width: 100%;
        margin-left: 0;
        margin-top: 50px;
    }

    /* ==========================================================================
       5. INSIGHT ARTICLE AREA (Premium Multi-Column Magazine Layout Grid)
       ========================================================================== */
    #article {
        width: 100%;
        margin-left: 0;
        padding: 40px 70px;           /* Aligns main container padding edges with the rest of the site */
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* 2 identical content columns side-by-side */
        gap: 40px;                    /* Clean structural spacing between article grid blocks */
    }

    .articlewrapper {
        padding: 40px;                /* Keeps internal spacing balanced inside the columns */
        box-sizing: border-box;
        height: 100%;                 /* Forces all cards to stretch to matching height heights */
        display: flex;
        flex-direction: column;       /* Stacks the elements vertically inside the card */
    }

    .articlewrapperdevision {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    .articletitle {
        font-size: 32px;              /* Adjusted down from mobile so titles wrap beautifully inside grid columns */
        line-height: 38px;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .articledis {
        font-size: 16px;
        line-height: 25px;
        margin-top: 15px;
        width: 100%;                  /* Lets text expand naturally to fill its custom column box width */
        flex-grow: 1;                 /* Pushes content down so cards sit level */
    }

    .articlenumber {
        width: 35%;
        max-width: 300px;
        margin-top: 25px;
    }

    .typeofarticlesvg {
        width: 65%;
        max-width: 280px;
        margin-top: 30px;
    }

    /* ==========================================================================
       6. TOPIC ENQUIRY CTA SECTION
       ========================================================================== */
    .question {
        padding: 100px 20px;
    }

    .questionsubtitle {
        font-family: "inter-18pt";
        font-size: 14px;
        letter-spacing: 2px;
    }

    .questiontitle {
        font-size: 56px;
        line-height: 62px;
        margin-top: 20px;
        max-width: 70%;
    }

    .questiondis {
        font-size: 18px;
        line-height: 28px;
        margin-top: 20px;
        width: 60%;
        max-width: 700px;
    }

    .questionbutton {
        margin-top: 35px;
    }

    .questionbutton a {
        font-size: 18px;
        transition: color 0.2s ease;
    }
}