/* =========================================================
   IJIMR PREMIUM COMPACT HERO
   SAME DESIGN — COMPACT SIZE ONLY
   WHITE + DEEP ACADEMIC BLUE + SKY BLUE
========================================================= */


/* =========================================================
   COLOR SYSTEM
========================================================= */

:root {

    --ijimr-blue: #123B63;
    --ijimr-blue-dark: #0A2945;
    --ijimr-blue-deep: #071D31;

    --ijimr-sky: #4DA3D9;
    --ijimr-sky-light: #8CC9ED;

    --ijimr-white: #FFFFFF;
    --ijimr-light: #F4F8FC;

    --ijimr-border: rgba(255,255,255,0.16);

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--ijimr-white);
}


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

.ijimr-hero {

    position: relative;

    min-height: 535px;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(77,163,217,0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--ijimr-blue-deep),
            var(--ijimr-blue)
        );

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   GRID
========================================================= */

.hero-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 90%
        );

    opacity: 0.55;

    z-index: -2;
}


/* =========================================================
   GLOW
========================================================= */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(65px);

    pointer-events: none;

    z-index: -1;
}

.hero-glow-one {

    width: 280px;
    height: 280px;

    right: 8%;
    top: 20%;

    background: rgba(77,163,217,0.15);
}

.hero-glow-two {

    width: 200px;
    height: 200px;

    left: 5%;
    bottom: 5%;

    background: rgba(18,59,99,0.5);
}


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

.ijimr-hero-container {

    width: min(1120px, calc(100% - 45px));

    min-height: 475px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items: center;

    gap: 35px;

    position: relative;

    z-index: 2;
}


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

.hero-content {

    padding: 35px 0 50px;

}


/* =========================================================
   EYEBROW
========================================================= */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--ijimr-sky-light);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    margin-bottom: 16px;
}


.eyebrow-line {

    width: 28px;

    height: 1px;

    background: var(--ijimr-sky);
}


/* =========================================================
   TITLE
========================================================= */

.hero-title {

    max-width: 700px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        42px,
        5.5vw,
        30px
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1px;

    color: var(--ijimr-white);

}


.hero-title span {

    display: block;

    color: var(--ijimr-sky-light);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {

    max-width: 500px;

    margin-top: 20px;

    font-size: 13px;

    line-height: 1.7;

    color: rgba(255,255,255,0.74);

}


/* =========================================================
   BUTTONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 25px;
}


.hero-btn {

    min-height: 43px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    border-radius: 4px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.2px;

    transition:
        transform .3s ease,
        background .3s ease,
        border .3s ease,
        box-shadow .3s ease;
}


.hero-btn-primary {

    color: var(--ijimr-blue-deep);

    background: var(--ijimr-white);

}


.hero-btn-primary:hover {

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(0,0,0,0.22);

}


.btn-arrow {

    font-size: 15px;

    color: var(--ijimr-blue);
}


.hero-btn-secondary {

    color: var(--ijimr-white);

    border: 1px solid
        rgba(255,255,255,0.3);

    background:
        rgba(255,255,255,0.04);

}


.hero-btn-secondary:hover {

    transform: translateY(-2px);

    background:
        rgba(255,255,255,0.1);

    border-color:
        var(--ijimr-sky-light);

}


/* =========================================================
   TRUST INDICATORS
========================================================= */

.hero-trust {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 30px;
}


.trust-item {

    display: flex;

    align-items: center;

    gap: 7px;
}


.trust-item strong {

    font-family: "Manrope";

    font-size: 16px;

    color: var(--ijimr-sky-light);
}


.trust-item span {

    font-size: 7px;

    line-height: 1.35;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    color: rgba(255,255,255,0.6);
}


.trust-divider {

    width: 1px;

    height: 24px;

    background:
        rgba(255,255,255,0.16);
}


/* =========================================================
   RESEARCH VISUAL
========================================================= */

.hero-visual {

    position: relative;

    width: 100%;

    max-width: 420px;

    height: 420px;

    margin: auto;

    transition:
        transform .3s ease;
}


/* =========================================================
   ORBITS
========================================================= */

.research-orbit {

    position: absolute;

    border: 1px solid
        rgba(140,201,237,0.2);

    border-radius: 50%;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);
}


.orbit-large {

    width: 360px;
    height: 360px;

    animation:
        orbitRotate 35s linear infinite;
}


.orbit-medium {

    width: 270px;
    height: 270px;

    border-style: dashed;

    animation:
        orbitRotateReverse 25s linear infinite;
}


.orbit-small {

    width: 180px;
    height: 180px;

    border-color:
        rgba(140,201,237,0.3);
}


/* =========================================================
   IJIMR CORE
========================================================= */

.ijimr-core {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 115px;
    height: 115px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    padding: 1px;

    background:
        linear-gradient(
            145deg,
            var(--ijimr-sky-light),
            var(--ijimr-blue)
        );

    box-shadow:
        0 0 40px
        rgba(77,163,217,0.25);
}


.core-inner {

    width: 100%;
    height: 100%;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        var(--ijimr-blue-deep);

    text-align: center;
}


.core-small {

    font-size: 6px;

    letter-spacing: 1.5px;

    color: var(--ijimr-sky-light);
}


.core-inner strong {

    margin: 5px 0;

    font-family: "Manrope";

    font-size: 28px;

    letter-spacing: 1.5px;
    
    color: var(--ijimr-light);
}


.core-subtitle {

    font-size: 6px;

    letter-spacing: 1.5px;

    color:
        rgba(255,255,255,0.6);
}


/* =========================================================
   RESEARCH CARDS
========================================================= */

.research-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 145px;

    padding: 8px 10px;

    border: 1px solid
        rgba(140,201,237,0.18);

    border-radius: 5px;

    background:
        rgba(7,29,49,0.72);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,0.16);
}


.card-number {

    font-size: 8px;

    color:
        var(--ijimr-sky-light);
}


.research-card strong {

    display: block;

    font-size: 8px;

    letter-spacing: .8px;
    
    color: var(--ijimr-light)
}


.research-card small {

    display: block;

    margin-top: 2px;

    font-size: 7px;

    color:
        rgba(255,255,255,0.5);
}


.card-data {

    top: 14%;

    right: 0;

    animation:
        floatingCard 5s ease-in-out infinite;
}


.card-management {

    bottom: 17%;

    right: 0;

    animation:
        floatingCard 6s ease-in-out infinite reverse;
}


.card-innovation {

    bottom: 5%;

    left: 7%;

    animation:
        floatingCard 5.5s ease-in-out infinite;
}


/* =========================================================
   FLOATING NODES
========================================================= */

.floating-node {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--ijimr-sky-light);

    box-shadow:
        0 0 12px
        var(--ijimr-sky);

    animation:
        nodePulse 2.5s ease-in-out infinite;
}


.floating-node-one {

    top: 18%;
    left: 20%;
}


.floating-node-two {

    top: 32%;
    right: 5%;
}


.floating-node-three {

    bottom: 24%;
    left: 4%;
}


.floating-node-four {

    bottom: 12%;
    right: 24%;
}


/* =========================================================
   CREDENTIAL BAR
========================================================= */

.hero-credentials {

    position: absolute;

    left: 50%;

    bottom: 0;

    width: min(1050px, calc(100% - 45px));

    transform:
        translateX(-50%);

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

    z-index: 5;
}


.credential-inner {

    min-height: 55px;

    display: flex;

    align-items: center;

    gap: 27px;
}


.credential-label {

    font-family: "Manrope";

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.2px;

    color:
        var(--ijimr-sky-light);
}


.credential-item {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .8px;

    color:
        rgba(255,255,255,0.55);
}


.credential-dot {

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--ijimr-sky);
}


/* =========================================================
   SCROLL
========================================================= */

.hero-scroll {

    position: absolute;

    right: 18px;

    bottom: 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color:
        rgba(255,255,255,0.4);

    font-size: 6px;

    letter-spacing: 1.2px;

    writing-mode:
        vertical-rl;
}


.hero-scroll i {

    width: 1px;

    height: 30px;

    background:
        linear-gradient(
            to bottom,
            var(--ijimr-sky),
            transparent
        );
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes orbitRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes orbitRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


@keyframes floatingCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}


@keyframes nodePulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }

}


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

@media (max-width: 950px) {

    .ijimr-hero {

        min-height: 700px;

    }


    .ijimr-hero-container {

        grid-template-columns: 1fr;

        min-height: 620px;

        gap: 0;

        text-align: center;

    }


    .hero-content {

        padding: 45px 0 0;

    }


    .hero-eyebrow {

        justify-content: center;

    }


    .hero-description {

        margin-left: auto;
        margin-right: auto;

    }


    .hero-actions {

        justify-content: center;

    }


    .hero-trust {

        justify-content: center;

    }


    .hero-visual {

        height: 330px;

        transform: scale(.75);

        margin-top: -25px;

    }


    .hero-scroll {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .ijimr-hero {

        min-height: 620px;

    }


    .ijimr-hero-container {

        width:
            min(100% - 30px, 540px);

        min-height: 540px;

    }


    .hero-content {

        padding:
            45px 0 10px;

    }


    .hero-eyebrow {

        font-size: 7px;

        letter-spacing: 1.2px;

    }


    .hero-title {

        font-size: 34px;

        line-height: 1.08;

        letter-spacing: -1.3px;

    }


    .hero-description {

        margin-top: 16px;

        font-size: 11px;

        line-height: 1.6;

    }


    .hero-actions {

        flex-direction: row;

        width: 100%;

        margin-top: 20px;

    }


    .hero-btn {

        width: auto;

        flex: 1;

        min-height: 40px;

        padding: 0 12px;

        font-size: 9px;

    }


    .hero-trust {

        gap: 10px;

        margin-top: 23px;

    }


    .trust-item strong {

        font-size: 14px;

    }


    .trust-item span {

        font-size: 6px;

    }


    .trust-divider {

        height: 20px;

    }


    .hero-visual {

        width: 100%;

        height: 280px;

        transform: scale(.58);

        margin:
            -25px auto -55px;

    }


    .hero-credentials {

        position: relative;

        left: auto;

        bottom: auto;

        width: 100%;

        transform: none;

        margin-top: 0;

    }


    .credential-inner {

        min-height: 65px;

        padding: 10px;

        justify-content: center;

        flex-wrap: wrap;

        gap: 7px 13px;

    }


    .credential-label {

        width: 100%;

        text-align: center;

        font-size: 10px;

    }


    .credential-item {

        font-size: 6px;

    }

}


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

@media (max-width: 380px) {

    .ijimr-hero {

        min-height: 590px;

    }


    .hero-title {

        font-size: 30px;

    }


    .hero-description {

        font-size: 10px;

    }


    .hero-visual {

        transform: scale(.50);

        margin-top: -35px;

    }


    .hero-trust {

        gap: 7px;

    }

}
/* =========================================================
   IJIMR ABOUT SECTION
   COMPACT PREMIUM DESIGN
========================================================= */

.ijimr-about {

    position: relative;

    background: #ffffff;

    color: #123B63;

    padding: 75px 0;

    overflow: hidden;
}


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

.about-container {

    width: min(1120px, calc(100% - 45px));

    margin: auto;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    align-items: center;

    gap: 75px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.about-visual {

    position: relative;

    display: flex;

    justify-content: center;
}


.about-image-panel {

    position: relative;

    width: 100%;

    max-width: 390px;

    height: 350px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #071D31,
            #123B63
        );

    border-radius: 4px;

    box-shadow:
        0 20px 50px
        rgba(18,59,99,0.15);
}


/* =========================================================
   PATTERN
========================================================= */

.about-pattern {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    opacity: .7;
}


/* =========================================================
   LABEL
========================================================= */

.about-label {

    position: absolute;

    top: 22px;

    left: 24px;

    padding-left: 10px;

    border-left:
        2px solid #4DA3D9;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #8CC9ED;
}


/* =========================================================
   CENTER
========================================================= */

.about-center {

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    text-align: center;

    width: 100%;
}


.about-small {

    display: block;

    margin-bottom: 5px;

    font-size: 7px;

    letter-spacing: 2px;

    color: #8CC9ED;
}


.about-center strong {

    display: block;

    font-family: "Manrope", sans-serif;

    font-size: 62px;

    line-height: 1;

    letter-spacing: 3px;

    color: #ffffff;
}


.about-sub {

    display: block;

    margin-top: 10px;

    font-size: 7px;

    line-height: 1.7;

    letter-spacing: 1.7px;

    color:
        rgba(255,255,255,.58);
}


/* =========================================================
   CORNER TEXT
========================================================= */

.about-corner {

    position: absolute;

    right: 22px;

    bottom: 20px;

    font-size: 7px;

    line-height: 1.8;

    letter-spacing: 1px;

    text-align: right;

    color:
        rgba(255,255,255,.38);
}


/* =========================================================
   NODES
========================================================= */

.about-node {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8CC9ED;

    box-shadow:
        0 0 14px
        rgba(77,163,217,.7);

    animation:
        aboutPulse 3s ease-in-out infinite;
}


.node-a {

    top: 27%;

    right: 22%;
}


.node-b {

    bottom: 30%;

    left: 17%;
}


.node-c {

    top: 17%;

    right: 8%;
}


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

.about-content {

    max-width: 570px;
}


.section-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #4DA3D9;
}


.section-eyebrow span {

    width: 27px;

    height: 1px;

    background: #4DA3D9;
}


/* =========================================================
   TITLE
========================================================= */

.about-content h2 {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(
        30px,
        3.5vw,
        44px
    );

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 800;

    color: #123B63;
}


.about-content h2 strong {

    display: block;

    color: #4DA3D9;

    font-weight: 800;
}


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

.about-intro {

    margin-top: 20px;

    font-size: 14px;

    line-height: 1.75;

    color: #3E556A;
}


.about-text {

    margin-top: 12px;

    font-size: 12px;

    line-height: 1.7;

    color: #728394;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.about-highlights {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 24px;
}


.about-highlight {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px;

    border: 1px solid #E3EBF2;

    background: #F8FBFD;

    border-radius: 4px;

    transition:
        transform .25s ease,
        border .25s ease;
}


.about-highlight:hover {

    transform: translateY(-3px);

    border-color: #8CC9ED;
}


.highlight-number {

    font-family: "Manrope";

    font-size: 15px;

    font-weight: 800;

    color: #4DA3D9;
}


.about-highlight strong {

    display: block;

    font-size: 10px;

    color: #123B63;
}


.about-highlight small {

    display: block;

    margin-top: 3px;

    font-size: 8px;

    color: #8796A4;
}


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

.about-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 25px;

    padding: 12px 18px;

    color: #ffffff;

    background: #123B63;

    text-decoration: none;

    border-radius: 3px;

    font-size: 10px;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;
}


.about-button span {

    font-size: 15px;

    color: #8CC9ED;
}


.about-button:hover {

    transform: translateY(-2px);

    background: #0A2945;
}


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

@keyframes aboutPulse {

    0%,
    100% {

        opacity: .4;

        transform: scale(1);

    }

    50% {

        opacity: 1;

        transform: scale(1.5);

    }

}


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

@media (max-width: 900px) {

    .ijimr-about {

        padding: 60px 0;

    }


    .about-container {

        grid-template-columns: 1fr;

        gap: 40px;

        max-width: 650px;

    }


    .about-image-panel {

        max-width: 430px;

        height: 300px;

    }


    .about-content {

        max-width: 100%;

        text-align: center;

    }


    .section-eyebrow {

        justify-content: center;

    }


    .about-highlights {

        text-align: left;

    }


    .about-button {

        margin-top: 22px;

    }

}


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

@media (max-width: 600px) {

    .ijimr-about {

        padding: 50px 0;

    }


    .about-container {

        width:
            calc(100% - 30px);

        gap: 30px;

    }


    .about-image-panel {

        height: 245px;

    }


    .about-center strong {

        font-size: 48px;

    }


    .about-content h2 {

        font-size: 30px;

    }


    .about-intro {

        font-size: 12px;

    }


    .about-text {

        font-size: 10px;

    }


    .about-highlights {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .about-highlight {

        padding: 11px;

    }

}
/* =========================================================
   IJIMR CURRENT ISSUE
   PREMIUM COMPACT SECTION
========================================================= */

.ijimr-current-issue {

    position: relative;

    padding: 70px 0;

    background: #F5F9FC;

    color: #123B63;

    overflow: hidden;
}


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

.current-container {

    width:
        min(1120px, calc(100% - 45px));

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.current-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 40px;

}


.current-heading .section-eyebrow {

    margin-bottom: 10px;

}


.current-heading h2 {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 40px;

    line-height: 1.05;

    letter-spacing: -1.5px;

    color: #123B63;

}


.current-heading h2 strong {

    color: #4DA3D9;

}


.current-heading > p {

    max-width: 310px;

    margin-bottom: 2px;

    font-size: 11px;

    line-height: 1.7;

    color: #748798;

}


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

.issue-wrapper {

    display: grid;

    grid-template-columns:
        330px
        1fr;

    gap: 65px;

    align-items: center;

    padding: 38px 45px;

    background: #ffffff;

    border: 1px solid #E2EAF1;

    box-shadow:
        0 15px 45px
        rgba(18,59,99,0.07);

}


/* =========================================================
   COVER AREA
========================================================= */

.issue-cover-area {

    display: flex;

    justify-content: center;

}


/* =========================================================
   COVER
========================================================= */

.issue-cover {

    position: relative;

    width: 220px;

    height: 285px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #071D31,
            #123B63
        );

    box-shadow:
        15px 18px 35px
        rgba(7,29,49,0.20);

}


/* =========================================================
   COVER PATTERN
========================================================= */

.issue-cover::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

}


/* =========================================================
   COVER TOP
========================================================= */

.cover-top {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

}


.cover-top span {

    font-family: "Manrope";

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #8CC9ED;

}


.cover-top small {

    margin-top: 3px;

    font-size: 5px;

    letter-spacing: 1.4px;

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

}


/* =========================================================
   COVER CENTER
========================================================= */

.cover-center {

    position: relative;

    z-index: 2;

}


.cover-label {

    font-size: 5px;

    letter-spacing: 1.3px;

    color: #8CC9ED;

}


.cover-center h3 {

    margin-top: 8px;

    font-family: "Manrope";

    font-size: 20px;

    line-height: 1.08;

    letter-spacing: -.5px;

}


/* =========================================================
   COVER LINES
========================================================= */

.cover-lines {

    position: absolute;

    right: -15px;

    top: 48%;

    width: 100px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    opacity: .35;

}


.cover-lines span {

    height: 1px;

    background: #8CC9ED;

}


.cover-lines span:nth-child(2) {

    width: 70%;

}


.cover-lines span:nth-child(3) {

    width: 45%;

}


/* =========================================================
   COVER BOTTOM
========================================================= */

.cover-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

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

    padding-top: 10px;

}


.cover-bottom span {

    font-size: 5px;

    letter-spacing: 1px;

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

}


.cover-bottom strong {

    font-size: 11px;

    color: #8CC9ED;

}


/* =========================================================
   ISSUE INFORMATION
========================================================= */

.issue-information {

    max-width: 600px;

}


.issue-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #4DA3D9;

}


.issue-meta i {

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #8CC9ED;

}


.issue-information h3 {

    margin-top: 17px;

    max-width: 600px;

    font-family: "Manrope";

    font-size: 30px;

    line-height: 1.15;

    letter-spacing: -1px;

    color: #123B63;

}


.issue-description {

    max-width: 560px;

    margin-top: 14px;

    font-size: 12px;

    line-height: 1.7;

    color: #748798;

}


/* =========================================================
   ISSUE DETAILS
========================================================= */

.issue-details {

    display: flex;

    gap: 10px;

    margin-top: 23px;

}


.issue-detail {

    min-width: 110px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
        1px solid #E2EAF1;

    background: #F8FBFD;

}


.detail-number {

    font-family: "Manrope";

    font-size: 13px;

    font-weight: 800;

    color: #4DA3D9;

}


.issue-detail small {

    display: block;

    font-size: 6px;

    letter-spacing: .8px;

    color: #8998A6;

}


.issue-detail strong {

    display: block;

    margin-top: 2px;

    font-size: 10px;

    color: #123B63;

}


/* =========================================================
   ACTIONS
========================================================= */

.issue-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

}


.issue-btn {

    min-height: 40px;

    padding: 0 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    border-radius: 3px;

    transition:
        transform .25s ease,
        background .25s ease,
        border .25s ease;
}


.issue-btn-primary {

    color: #ffffff;

    background: #123B63;

}


.issue-btn-primary span {

    font-size: 14px;

    color: #8CC9ED;

}


.issue-btn-primary:hover {

    transform: translateY(-2px);

    background: #0A2945;

}


.issue-btn-secondary {

    color: #123B63;

    border:
        1px solid #CCD9E3;

    background: #ffffff;

}


.issue-btn-secondary:hover {

    transform: translateY(-2px);

    border-color: #4DA3D9;

}


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

@media (max-width: 850px) {

    .ijimr-current-issue {

        padding: 60px 0;

    }


    .current-heading {

        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 30px;

    }


    .issue-wrapper {

        grid-template-columns: 250px 1fr;

        gap: 35px;

        padding: 30px;

    }


    .issue-cover {

        width: 190px;

        height: 250px;

    }


    .issue-information h3 {

        font-size: 25px;

    }

}


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

@media (max-width: 650px) {

    .ijimr-current-issue {

        padding: 50px 0;

    }


    .current-container {

        width:
            calc(100% - 30px);

    }


    .current-heading {

        margin-bottom: 25px;

    }


    .current-heading h2 {

        font-size: 32px;

    }


    .issue-wrapper {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 25px 18px;

    }


    .issue-cover-area {

        justify-content: center;

    }


    .issue-cover {

        width: 180px;

        height: 235px;

    }


    .issue-information {

        text-align: center;

    }


    .issue-meta {

        justify-content: center;

        flex-wrap: wrap;

    }


    .issue-information h3 {

        font-size: 23px;

    }


    .issue-description {

        font-size: 11px;

    }


    .issue-details {

        justify-content: center;

        flex-wrap: wrap;

    }


    .issue-actions {

        justify-content: center;

        flex-wrap: wrap;

    }

}
/* =========================================================
   IJIMR WHY SECTION
   PREMIUM COMPACT DESIGN
========================================================= */

.ijimr-why {

    position: relative;

    padding: 75px 0;

    background: #ffffff;

    color: #123B63;

    overflow: hidden;
}


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

.why-container {
    
    width:
        min(1120px, calc(100% - 45px));
     
    margin: auto;
    
    margin-top: -50px;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 85px;

    align-items: center;
    

}


/* =========================================================
   INTRO
========================================================= */

.why-intro {

    max-width: 430px;

}


.why-intro .section-eyebrow {

    margin-bottom: 16px;

}


/* =========================================================
   TITLE
========================================================= */

.why-intro h2 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 42px;

    line-height: 1.08;

    letter-spacing: -1.7px;

    color: #123B63;

}


.why-intro h2 strong {

    display: block;

    color: #4DA3D9;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.why-intro > p {

    margin-top: 20px;

    max-width: 410px;

    font-size: 12px;

    line-height: 1.8;

    color: #748798;

}


/* =========================================================
   MARK
========================================================= */

.why-mark {

    margin-top: 30px;

    padding-left: 15px;

    border-left:
        2px solid #4DA3D9;

}


.why-mark span {

    display: block;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #123B63;

}


.why-mark small {

    display: block;

    margin-top: 5px;

    font-size: 6px;

    letter-spacing: 1.2px;

    color: #91A0AD;

}


/* =========================================================
   BENEFIT LIST
========================================================= */

.why-list {

    border-top:
        1px solid #E1E9F0;

}


/* =========================================================
   ITEM
========================================================= */

.why-item {

    position: relative;

    display: grid;

    grid-template-columns:
        45px
        1fr
        30px;

    gap: 15px;

    align-items: center;

    padding: 20px 5px;

    border-bottom:
        1px solid #E1E9F0;

    transition:
        padding .3s ease,
        background .3s ease;

}


.why-item:hover {

    padding-left: 12px;

    padding-right: 12px;

    background: #F7FAFC;

}


/* =========================================================
   NUMBER
========================================================= */

.why-number {

    font-family:
        "Manrope",
        sans-serif;

    font-size: 15px;

    font-weight: 800;

    color: #4DA3D9;

}


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

.why-item-content h3 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    color: #123B63;

}


.why-item-content p {

    max-width: 480px;

    margin-top: 5px;

    font-size: 10px;

    line-height: 1.65;

    color: #81909D;

}


/* =========================================================
   ARROW
========================================================= */

.why-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border:
        1px solid #D9E4EC;

    color: #4DA3D9;

    font-size: 13px;

    transition:
        transform .3s ease,
        background .3s ease,
        border .3s ease;

}


.why-item:hover .why-arrow {

    transform:
        translateX(3px);

    background: #123B63;

    border-color: #123B63;

}


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

@media (max-width: 850px) {

    .ijimr-why {

        padding: 60px 0;

    }


    .why-container {

        grid-template-columns: 1fr;

        gap: 45px;

        max-width: 700px;

    }


    .why-intro {

        max-width: 100%;

        text-align: center;

    }


    .why-intro > p {

        margin-left: auto;

        margin-right: auto;

    }


    .why-mark {

        display: inline-block;

        text-align: left;

    }

}


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

@media (max-width: 600px) {

    .ijimr-why {

        padding: 50px 0;

    }


    .why-container {

        width:
            calc(100% - 30px);

        gap: 30px;

    }


    .why-intro h2 {

        font-size: 31px;

    }


    .why-intro > p {

        font-size: 11px;

    }


    .why-item {

        grid-template-columns:
            35px
            1fr
            25px;

        gap: 9px;

        padding: 16px 2px;

    }


    .why-item:hover {

        padding-left: 6px;

        padding-right: 6px;

    }


    .why-number {

        font-size: 12px;

    }


    .why-item-content h3 {

        font-size: 13px;

    }


    .why-item-content p {

        font-size: 9px;

        line-height: 1.55;

    }


    .why-arrow {

        width: 24px;

        height: 24px;

        font-size: 11px;

    }

}