/* ================================================================
   IJRCSIT CONFERENCE — FRESH COMPACT PREMIUM CSS
   ROBOTO / LARGE READABLE TYPOGRAPHY
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap');

:root {
    --ijrcsit-dark: #102b38;
    --ijrcsit-primary: #1e4356;
    --ijrcsit-blue: #4f8eae;
    --ijrcsit-accent: #68a4c4;

    --ijrcsit-light: #eaf4f9;
    --ijrcsit-border: #d4e3ea;

    --ijrcsit-text: #263746;
    --ijrcsit-muted: #5e707d;

    --ijrcsit-white: #ffffff;

    --ijrcsit-soft: #f5fafc;
    --ijrcsit-pale: #f8fbfc;

    --ijrcsit-shadow:
        0 8px 24px rgba(30, 67, 86, .08);

    --ijrcsit-container: 1180px;
}


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

.ijconf-page,
.ijconf-page *,
.ijconf-page *::before,
.ijconf-page *::after {
    box-sizing: border-box;
}

.ijconf-page {
    margin: 0;
    padding: 0;

    color: var(--ijrcsit-text);
    background: #ffffff;

    font-family: "Roboto", Arial, sans-serif;

    font-size: 16px;

    line-height: 1.55;

    overflow-x: hidden;
}

.ijconf-page h1,
.ijconf-page h2,
.ijconf-page h3,
.ijconf-page h4,
.ijconf-page p,
.ijconf-page span,
.ijconf-page strong,
.ijconf-page small,
.ijconf-page a,
.ijconf-page button {
    font-family: "Roboto", Arial, sans-serif;
}

.ijconf-page a {
    text-decoration: none;
}


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

.ijconf-container {
    width: min(
        calc(100% - 38px),
        var(--ijrcsit-container)
    );

    margin: 0 auto;
}


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



.ijconf-hero-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(104,164,196,.30),
            transparent 30%
        );

    pointer-events: none;
}

.ijconf-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .06;

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

    background-size: 55px 55px;
}

.ijconf-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16,43,56,.28),
            transparent
        );
}


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

.ijconf-hero-inner {
    position: relative;
    z-index: 3;

    min-height: 350px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .65fr);

    align-items: center;

    gap: 42px;

    padding-top: 30px;
    padding-bottom: 25px;
}

.ijconf-hero-copy {
    max-width: 790px;
}


/* HERO LABEL */

.ijconf-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 11px;

    color: #eaf7fc;

    background: rgba(255,255,255,.10);

    border:
        1px solid
        rgba(255,255,255,.25);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .10em;
}

.label-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ijrcsit-accent);
}


/* HERO TITLE */

.ijconf-hero h1 {
    margin: 14px 0 13px;

    max-width: 780px;

    color: #ffffff;

    font-size: clamp(28px, 3.3vw, 37px);

    line-height: 1.05;

    letter-spacing: -.010em;

    font-weight: 700;
}

.ijconf-hero h1 span {
    

    color: #c4e5f2;
}


/* HERO DESCRIPTION */

.ijconf-hero-description {
    max-width: 650px;

    margin: 0 0 20px;

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

    font-size: 16px;

    line-height: 1.55;
}


/* HERO ACTIONS */

.ijconf-hero-actions {
    display: flex;

    align-items: center;

    gap: 17px;
}

.ijconf-primary-btn {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-width: 175px;

    padding: 12px 14px 12px 17px;

    color: #ffffff;

    background: var(--ijrcsit-blue);

    border:
        1px solid
        var(--ijrcsit-blue);

    font-size: 13px;

    font-weight: 700;

    transition: .2s ease;
}

.ijconf-primary-btn b {
    font-size: 17px;

    font-weight: 400;
}

.ijconf-primary-btn:hover {
    background: var(--ijrcsit-accent);

    border-color: var(--ijrcsit-accent);

    transform: translateY(-1px);
}

.ijconf-text-btn {
    color: rgba(255,255,255,.92);

    font-size: 13px;

    font-weight: 600;
}

.ijconf-text-btn span {
    margin-left: 6px;

    color: #b8dfef;
}


/* ================================================================
   EVENT CARD
================================================================ */

.ijconf-hero-side {
    position: relative;
}

.ijconf-event-card {
    padding: 20px;

    background: rgba(255,255,255,.12);

    border:
        1px solid
        rgba(255,255,255,.28);

    backdrop-filter: blur(10px);
}

.event-card-top {
    display: flex;

    justify-content: space-between;

    padding-bottom: 14px;

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

.event-card-top span {
    max-width: 150px;

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

    font-size: 10px;

    line-height: 1.45;

    letter-spacing: .08em;
}

.event-card-top strong {
    
    align-items: center;
    
    color: #e0f1f7;

    font-size: 26px;

    font-weight: 700;
}

.event-card-date {
    padding: 16px 0;
}

.event-card-date small {
    color: rgba(255,255,255,.70);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .08em;
}

.event-card-date b {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 23px;

    font-weight: 700;
}

.event-card-location {
    display: flex;

    align-items: center;

    gap: 8px;

    padding-top: 12px;

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

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

    font-size: 11px;
}

.event-card-location span {
    color: #b4dfee;
}

.ijconf-floating-tech {
    display: flex;

    justify-content: space-between;

    margin-top: 10px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .07em;
}


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

.ijconf-hero-bottom {
    position: absolute;

    z-index: 4;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: min(
        calc(100% - 38px),
        var(--ijrcsit-container)
    );

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

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

.ijconf-hero-bottom > div {
    min-height: 64px;

    padding: 11px 17px;

    border-right:
        1px solid
        rgba(255,255,255,.14);
}

.ijconf-hero-bottom > div:last-child {
    border-right: 0;
}

.ijconf-hero-bottom small {
    display: block;

    margin-bottom: 3px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .09em;
}

.ijconf-hero-bottom strong {
    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}


/* ================================================================
   GENERAL SECTION
================================================================ */

.ijconf-section {
    padding: 48px 0;
}

.ijconf-section-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .7fr);

    align-items: end;

    gap: 38px;

    margin-bottom: 27px;
}

.ijconf-kicker {
    display: inline-block;

    margin-bottom: 8px;

    color: var(--ijrcsit-blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .11em;
}

.ijconf-section-head h2 {
    margin: 0;

    color: var(--ijrcsit-primary);

    font-size: clamp(29px, 3vw, 39px);

    line-height: 1.1;

    letter-spacing: -.02em;

    font-weight: 700;
}

.ijconf-section-head h2 em {
    color: var(--ijrcsit-blue);

    font-style: normal;
}

.ijconf-section-head > p {
    margin: 0;

    color: var(--ijrcsit-muted);

    font-size: 15px;

    line-height: 1.6;
}


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

.ijconf-intro {
    background: #ffffff;
}

.ijconf-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(310px, .5fr);

    gap: 38px;
}

.ijconf-intro-main p {
    margin: 0 0 14px;

    color: var(--ijrcsit-text);

    font-size: 15px;

    line-height: 1.7;
}

.ijconf-intro-main p:last-child {
    margin-bottom: 0;
}

/* ================================================================
   SCOPE
================================================================ */

.ijconf-scope {
    background: var(--ijrcsit-pale);

    border-top:
        1px solid
        var(--ijrcsit-border);

    border-bottom:
        1px solid
        var(--ijrcsit-border);
}

.ijconf-scope-layout {
    display: grid;

    grid-template-columns: 325px 1fr;

    gap: 18px;
}

.ijconf-scope-menu {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.scope-item {
    display: grid;

    grid-template-columns:
        38px
        1fr
        22px;

    align-items: center;

    width: 100%;

    min-height: 51px;

    padding: 0 13px;

    color: var(--ijrcsit-primary);

    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);

    text-align: left;

    cursor: pointer;

    font-family: "Roboto", Arial, sans-serif;
}

.scope-item span {
    color: var(--ijrcsit-blue);

    font-size: 10px;

    font-weight: 700;
}

.scope-item b {
    font-size: 13px;

    font-weight: 600;
}

.scope-item i {
    color: var(--ijrcsit-blue);

    font-size: 13px;

    text-align: right;
}

.scope-item:hover,
.scope-item.active {
    color: #ffffff;

    background: var(--ijrcsit-primary);

    border-color: var(--ijrcsit-primary);
}

.scope-item.active span,
.scope-item.active i {
    color: #b8dfef;
}


/* SCOPE PANEL */

.ijconf-scope-panel {
    position: relative;

    min-height: 315px;

    padding: 31px;

    color: var(--ijrcsit-text);

    background:
        linear-gradient(
            135deg,
            #f0f8fb,
            #e5f2f7
        );

    border:
        1px solid
        var(--ijrcsit-border);

    overflow: hidden;
}

.scope-panel-number {
    position: absolute;

    top: 5px;
    right: 20px;

    color: rgba(79,142,174,.10);

    font-size: 105px;

    font-weight: 800;
}

.ijconf-scope-panel > span {
    color: var(--ijrcsit-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .10em;
}

.ijconf-scope-panel h3 {
    position: relative;
    z-index: 2;

    margin: 22px 0 10px;

    color: var(--ijrcsit-primary);

    font-size: 29px;

    font-weight: 700;
}

.ijconf-scope-panel p {
    position: relative;
    z-index: 2;

    max-width: 720px;

    margin: 0 0 19px;

    color: var(--ijrcsit-text);

    font-size: 14px;

    line-height: 1.65;
}

.scope-tags {
    position: relative;
    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.scope-tags b {
    padding: 7px 10px;

    color: var(--ijrcsit-primary);

    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);

    font-size: 10px;

    font-weight: 600;
}


/* ================================================================
   KEYNOTE SPEAKERS
   3 BIGGER CARDS
================================================================ */

.ijconf-speakers {
    
    padding-top: 45px;

    padding-bottom: 45px;

    background: #ffffff;

    border-top:
        1px solid
        var(--ijrcsit-border);
    
}

.speaker-heading {
    margin-bottom: 25px;
}

.speaker-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* BIGGER CARD */

.speaker-card {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr);

    min-height: 150px;

    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.speaker-card:hover {
    border-color: var(--ijrcsit-blue);

    box-shadow: var(--ijrcsit-shadow);

    transform: translateY(-3px);
}


/* SPEAKER PHOTO */

.speaker-photo {
    position: relative;

    min-height: 150px;

    background: var(--ijrcsit-light);

    overflow: hidden;
}

.speaker-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.speaker-photo::after {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 35%;

    background:
        linear-gradient(
            transparent,
            rgba(16,43,56,.40)
        );
}

.speaker-number {
    position: absolute;

    z-index: 3;

    left: 10px;
    bottom: 8px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;
}

.speaker-role {
    position: absolute;

    z-index: 4;

    top: 10px;
    left: 10px;

    padding: 6px 8px;

    color: var(--ijrcsit-primary);

    background: rgba(255,255,255,.94);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .06em;
}


/* ================================================================
   SPEAKER INFORMATION
================================================================ */

.speaker-info {
    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 20px 18px;
}


/* NAME */

.speaker-info h3 {
    margin: 0 0 7px;

    color: var(--ijrcsit-primary);

    font-size: 19px;

    line-height: 1.18;

    font-weight: 700;
}


/* DESIGNATION */

.speaker-info strong {
    display: block;

    margin-bottom: 9px;

    color: var(--ijrcsit-blue);

    font-size: 13px;

    line-height: 1.35;

    font-weight: 700;
}


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

.speaker-keynote-title {
    margin: 5px 0 11px;

    padding: 9px 10px;

    color: var(--ijrcsit-primary);

    background: var(--ijrcsit-light);

    border-left:
        3px solid
        var(--ijrcsit-blue);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;
}

.speaker-keynote-title::before {
    content: "KEYNOTE • ";

    color: var(--ijrcsit-blue);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .08em;
}


/* AFFILIATION */

.speaker-info p {
    margin: auto 0 0;

    color: var(--ijrcsit-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* ================================================================
   REVIEWERS
   ONE REVIEWER PER ROW
================================================================ */

.ijconf-reviewers {
    padding-top: 45px;

    padding-bottom: 45px;

    background: var(--ijrcsit-light);

    border-top:
        1px solid
        var(--ijrcsit-border);
}

.ijconf-reviewers .ijconf-section-head {
    margin-bottom: 25px;
}


/* ONE COLUMN */

.judge-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
}


/* BIG REVIEWER CARD */

.judge-card {
    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr)
        210px;

    min-height: 145px;

    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);

    overflow: hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.judge-card:hover {
    border-color: var(--ijrcsit-blue);

    box-shadow:
        0 8px 22px
        rgba(30,67,86,.08);

    transform: translateY(-1px);
}


/* REVIEWER PHOTO */

.judge-photo {
    position: relative;

    min-height: 145px;

    background: #dcecf3;

    overflow: hidden;
}

.judge-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.judge-photo span {
    position: absolute;

    left: 9px;
    bottom: 7px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;
}


/* REVIEWER MAIN CONTENT */

.judge-content {
    padding: 19px 21px;
}

.judge-role {
    margin-bottom: 6px;

    color: var(--ijrcsit-blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;
}

.judge-content h3 {
    margin: 0 0 5px;

    color: var(--ijrcsit-primary);

    font-size: 19px;

    line-height: 1.2;

    font-weight: 700;
}

.judge-content strong {
    display: block;

    margin-bottom: 5px;

    color: var(--ijrcsit-text);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;
}

.judge-content p {
    margin: 0;

    color: var(--ijrcsit-muted);

    font-size: 12px;

    line-height: 1.5;
}


/* REVIEW AREA */

.judge-area {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px;

    background: var(--ijrcsit-soft);

    border-left:
        1px solid
        var(--ijrcsit-border);
}

.judge-area small {
    display: block;

    margin-bottom: 5px;

    color: var(--ijrcsit-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;
}

.judge-area b {
    color: var(--ijrcsit-blue);

    font-size: 12px;

    line-height: 1.45;

    font-weight: 600;
}


/* ================================================================
   INTELLIGENCE
================================================================ */

.ijconf-intelligence {
    background: #ffffff;
}

.intel-navigation {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid
        var(--ijrcsit-border);

    border-bottom:
        1px solid
        var(--ijrcsit-border);
}

.intel-btn {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 58px;

    padding: 0 17px;

    color: var(--ijrcsit-muted);

    background: #ffffff;

    border: 0;

    border-right:
        1px solid
        var(--ijrcsit-border);

    font-family: "Roboto", Arial, sans-serif;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;
}

.intel-btn span {
    color: var(--ijrcsit-blue);

    font-size: 10px;
}

.intel-btn.active {
    color: #ffffff;

    background: var(--ijrcsit-primary);
}

.intel-panel {
    margin-top: 13px;

    padding: 24px 27px;

    background: var(--ijrcsit-light);

    border-left:
        3px solid
        var(--ijrcsit-blue);
}

.intel-panel > span {
    color: var(--ijrcsit-blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;
}

.intel-panel h3 {
    margin: 8px 0 7px;

    color: var(--ijrcsit-primary);

    font-size: 24px;

    font-weight: 700;
}

.intel-panel p {
    margin: 0;

    color: var(--ijrcsit-text);

    font-size: 14px;

    line-height: 1.6;
}


/* ================================================================
   DATES
================================================================ */

.ijconf-dates {
    background: var(--ijrcsit-pale);

    border-top:
        1px solid
        var(--ijrcsit-border);
}

.dates-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}

.date-card {
    position: relative;

    padding: 21px;

    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);
}

.date-card.active {
    border-top:
        3px solid
        var(--ijrcsit-blue);
}

.date-card > span {
    position: absolute;

    top: 14px;
    right: 17px;

    color: #b7c8d1;

    font-size: 10px;

    font-weight: 700;
}

.date-card small {
    display: block;

    margin-bottom: 9px;

    color: var(--ijrcsit-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;
}

.date-card strong {
    display: block;

    color: var(--ijrcsit-primary);

    font-size: 22px;

    font-weight: 700;
}

.date-card em {
    display: inline-block;

    margin-top: 11px;

    padding: 5px 8px;

    color: var(--ijrcsit-blue);

    background: var(--ijrcsit-light);

    font-size: 9px;

    font-style: normal;

    font-weight: 700;
}


/* ================================================================
   JOURNEY
================================================================ */

.ijconf-journey {
    background: #ffffff;
}

.journey-grid {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 1px;

    background: var(--ijrcsit-border);

    border:
        1px solid
        var(--ijrcsit-border);
}

.journey-card {
    min-height: 145px;

    padding: 17px 14px;

    background: #ffffff;
}

.journey-number {
    display: block;

    margin-bottom: 20px;

    color: var(--ijrcsit-blue);

    font-size: 10px;

    font-weight: 800;
}

.journey-card h3 {
    margin: 0 0 7px;

    color: var(--ijrcsit-primary);

    font-size: 15px;

    font-weight: 700;
}

.journey-card p {
    margin: 0;

    color: var(--ijrcsit-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* ================================================================
   DOMAINS
================================================================ */

.ijconf-domains {
    background: var(--ijrcsit-light);

    border-top:
        1px solid
        var(--ijrcsit-border);
}

.domain-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 13px;
}

.domain-card {
    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);

    overflow: hidden;

    transition: .2s ease;
}

.domain-card:hover {
    box-shadow: var(--ijrcsit-shadow);

    transform: translateY(-2px);
}

.domain-image {
    position: relative;

    height: 140px;

    background: #dcecf3;

    overflow: hidden;
}

.domain-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.domain-card:hover .domain-image img {
    transform: scale(1.04);
}

.domain-image span {
    position: absolute;

    top: 9px;
    left: 9px;

    padding: 5px 7px;

    color: #ffffff;

    background: rgba(16,43,56,.72);

    font-size: 9px;

    font-weight: 700;
}

.domain-content {
    padding: 16px;
}

.domain-content small {
    color: var(--ijrcsit-blue);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}

.domain-content h3 {
    margin: 7px 0 7px;

    color: var(--ijrcsit-primary);

    font-size: 18px;

    font-weight: 700;
}

.domain-content p {
    min-height: 46px;

    margin: 0 0 12px;

    color: var(--ijrcsit-muted);

    font-size: 11px;

    line-height: 1.55;
}

.domain-content a {
    display: flex;

    justify-content: space-between;

    padding-top: 9px;

    color: var(--ijrcsit-blue);

    border-top:
        1px solid
        var(--ijrcsit-border);

    font-size: 10px;

    font-weight: 700;
}


/* ================================================================
   SUBMISSION CTA
================================================================ */

.ijconf-submit {
    position: relative;

    color: #ffffff;
    
    

    background:
        linear-gradient(
            120deg,
            #24576e,
            #4f8eae
        );

background:
        linear-gradient(
            145deg,
            rgba(7,29,41,.78),
            rgba(16,67,87,.68),
            rgba(30,82,104,.72)
        ),
        url("../img/submit-bg.png") center / cover no-repeat;       
      
    overflow: hidden;
}

.submit-pattern {
    position: absolute;

    inset: 0;

    opacity: .07;

    background-image:
        linear-gradient(
            30deg,
            transparent 48%,
            #ffffff 49%,
            transparent 50%
        ),
        linear-gradient(
            -30deg,
            transparent 48%,
            #ffffff 49%,
            transparent 50%
        );
        

    background-size: 45px 45px;
}

.submit-inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding-top: 40px;

    padding-bottom: 40px;
}

.ijconf-submit .ijconf-kicker {
    color: #c8e9f4;
}

.ijconf-submit h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 34px;

    line-height: 1.1;
}

.ijconf-submit h2 em {
    color: #d8eff8;

    font-style: normal;
}

.ijconf-submit p {
    margin: 0;

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

    font-size: 14px;
}

.submit-actions {
    display: flex;

    gap: 9px;

    flex-shrink: 0;
}

.light-btn {
    color: var(--ijrcsit-primary);

    background: #ffffff;

    border-color: #ffffff;
}

.ijconf-outline-btn {
    display: inline-flex;

    align-items: center;

    min-height: 43px;

    padding: 0 17px;

    color: #ffffff;

    border:
        1px solid
        rgba(255,255,255,.45);

    font-size: 11px;

    font-weight: 600;
}


/* ================================================================
   CONTACT
================================================================ */

.ijconf-contact {
    padding-top: 48px;

    padding-bottom: 48px;
}

.contact-grid {
    display: grid;

    grid-template-columns:
        1fr
        .9fr;

    gap: 55px;
}

.ijconf-contact h2 {
    margin: 0 0 9px;

    color: var(--ijrcsit-primary);

    font-size: 34px;

    font-weight: 700;
}

.ijconf-contact h2 em {
    color: var(--ijrcsit-blue);

    font-style: normal;
}

.ijconf-contact p {
    max-width: 600px;

    margin: 0;

    color: var(--ijrcsit-muted);

    font-size: 14px;

    line-height: 1.65;
}

.contact-details {
    border-top:
        1px solid
        var(--ijrcsit-border);
}

.contact-details > *,
.contact-details a {
    display: block;

    padding: 13px 0;

    border-bottom:
        1px solid
        var(--ijrcsit-border);
}

.contact-details small {
    display: block;

    margin-bottom: 4px;

    color: var(--ijrcsit-muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}

.contact-details strong {
    color: var(--ijrcsit-primary);

    font-size: 13px;

    font-weight: 600;
}


/* ================================================================
   BACK TOP
================================================================ */

.ijconf-back-top {
    position: fixed;

    z-index: 50;

    right: 18px;

    bottom: 18px;

    width: 39px;

    height: 39px;

    color: #ffffff;

    background: var(--ijrcsit-primary);

    border: 0;

    font-size: 16px;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition: .2s ease;
}

.ijconf-back-top.visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* ================================================================
   REVEAL
================================================================ */

.reveal {
    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity .45s ease,
        transform .45s ease;
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 1100px) {

    .ijconf-hero-inner {
        grid-template-columns: 1fr;
    }

    .ijconf-hero-side {
        display: none;
    }

    .ijconf-hero {
        min-height: 430px;
    }

    .speaker-card {
        grid-template-columns:
            135px
            1fr;
    }

    .speaker-photo {
        min-height: 245px;
    }

    .judge-card {
        grid-template-columns:
            115px
            minmax(0, 1fr)
            180px;
    }

    .journey-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}


/* ================================================================
   TABLET / SMALL DESKTOP
================================================================ */

@media (max-width: 850px) {

    .ijconf-section-head {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .ijconf-intro-grid {
        grid-template-columns: 1fr;
    }

    .ijconf-scope-layout {
        grid-template-columns: 1fr;
    }

    .speaker-grid {
        grid-template-columns: 1fr;
    }

    .speaker-card {
        grid-template-columns:
            180px
            1fr;

        min-height: 220px;
    }

    .speaker-photo {
        min-height: 220px;
    }

    .judge-card {
        grid-template-columns:
            120px
            1fr;
    }

    .judge-area {
        grid-column: 2;

        min-height: 65px;

        padding: 12px 20px;

        border-top:
            1px solid
            var(--ijrcsit-border);

        border-left: 0;
    }

    .domain-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .intel-navigation {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .dates-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }
}


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

@media (max-width: 650px) {

    .ijconf-container {
        width: calc(100% - 26px);
    }

    .ijconf-section {
        padding: 38px 0;
    }

    .ijconf-hero {
        min-height: 525px;
    }

    .ijconf-hero-inner {
        min-height: 420px;

        padding-top: 30px;
    }

    .ijconf-hero h1 {
        font-size: 34px;
    }

    .ijconf-hero-description {
        font-size: 14px;
    }

    .ijconf-hero-bottom {
        width: 100%;

        grid-template-columns:
            repeat(2, 1fr);
    }

    .ijconf-hero-bottom > div {
        min-height: 58px;

        padding: 10px 12px;
    }

    .ijconf-section-head h2 {
        font-size: 29px;
    }

    .ijconf-section-head > p {
        font-size: 14px;
    }

    /* Keynote */
    .speaker-grid {
        grid-template-columns: 1fr;
    }

    .speaker-card {
        grid-template-columns:
            125px
            1fr;

        min-height: 215px;
    }

    .speaker-photo {
        min-height: 215px;
    }

    .speaker-info {
        padding: 18px 15px;
    }

    .speaker-info h3 {
        font-size: 18px;
    }

    .speaker-info strong {
        font-size: 12px;
    }

    .speaker-keynote-title {
        font-size: 11px;
    }

    /* Reviewer */
    .judge-card {
        grid-template-columns:
            105px
            1fr;
    }

    .judge-photo {
        min-height: 135px;
    }

    .judge-content {
        padding: 16px;
    }

    .judge-content h3 {
        font-size: 17px;
    }

    .judge-content strong {
        font-size: 12px;
    }

    .judge-content p {
        font-size: 11px;
    }

    .judge-area {
        grid-column: 2;
    }

    .journey-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .submit-inner {
        display: block;
    }

    .submit-actions {
        margin-top: 20px;

        flex-wrap: wrap;
    }
}


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

@media (max-width: 480px) {

    .ijconf-hero h1 {
        font-size: 30px;
    }

    .ijconf-hero-description {
        font-size: 13px;
    }

    .ijconf-primary-btn {
        min-width: 155px;
    }

    .speaker-card {
        grid-template-columns:
            100px
            1fr;
    }

    .speaker-photo {
        min-height: 210px;
    }

    .speaker-info h3 {
        font-size: 16px;
    }

    .speaker-info strong {
        font-size: 11px;
    }

    .speaker-info p {
        font-size: 10px;
    }

    .speaker-keynote-title {
        padding: 7px 8px;

        font-size: 10px;
    }

    .judge-card {
        grid-template-columns:
            90px
            1fr;
    }

    .judge-content h3 {
        font-size: 16px;
    }

    .judge-area {
        padding: 11px 15px;
    }

    .domain-grid {
        grid-template-columns: 1fr;
    }

    .journey-grid {
        grid-template-columns: 1fr;
    }

    .intel-navigation {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   COMPACT DIGITAL COUNTDOWN
========================================================= */

.ijconf-countdown-card {
    padding: 17px 18px;
}

.countdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 11px;

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

.countdown-heading small {
    color: rgba(255,255,255,.78);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .10em;
}

.countdown-heading span {
    color: #b9dcea;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .08em;
}


/* DIGITAL WATCH ROW */

.ijconf-countdown {
    display: grid;

    grid-template-columns:
        1fr
        10px
        1fr
        10px
        1fr
        10px
        1fr;

    align-items: center;

    gap: 5px;

    padding: 17px 0 15px;
}


/* EACH DIGITAL COLUMN */

.countdown-unit {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;
}


/* DIGITAL NUMBER */

.countdown-unit strong {
    display: block;

    width: 100%;

    padding: 7px 3px;

    color: #eaf8fd;

    background: rgba(255,255,255,.09);

    border: 1px solid rgba(255,255,255,.15);

    font-family:
        "Roboto Mono",
        "Courier New",
        monospace;

    font-size: 22px;

    line-height: 1;

    font-weight: 700;

    text-align: center;

    letter-spacing: .03em;

    text-shadow:
        0 0 8px rgba(104,164,196,.35);
}


/* LABEL */

.countdown-unit span {
    margin-top: 6px;

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

    font-size: 7px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .08em;
}


/* DIGITAL SEPARATOR */

.countdown-separator {
    color: #8fc5da;

    font-family:
        "Roboto Mono",
        monospace;

    font-size: 17px;

    font-weight: 700;

    text-align: center;

    padding-bottom: 12px;

    animation: countdownBlink 1s infinite;
}

@keyframes countdownBlink {

    0%,
    45% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: .35;
    }
}


/* LOCATION */

.ijconf-countdown-card .event-card-location {
    padding-top: 10px;

    font-size: 10px;
}


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

@media (max-width: 480px) {

    .ijconf-countdown-card {
        padding: 15px;
    }

    .countdown-unit strong {
        font-size: 19px;

        padding: 7px 2px;
    }

    .countdown-separator {
        font-size: 14px;
    }

    .countdown-unit span {
        font-size: 6px;
    }
}
/* =========================================================
   RESEARCH JOURNEY — CONTINUOUS MOVING LOOP
========================================================= */

.ijconf-journey {
    overflow: hidden;
    background: #ffffff;
}


/* SLIDER WINDOW */

.journey-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    /* fade edges */
    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
}


/* MOVING TRACK */

.journey-track {
    display: flex;

    width: max-content;

    gap: 12px;

    animation:
        journeyLoop 28s linear infinite;

    will-change: transform;
}


/* INDIVIDUAL CARD */

.journey-track .journey-card {
    flex: 0 0 220px;

    width: 220px;

    min-height: 155px;

    padding: 18px 17px;

    background: #ffffff;

    border:
        1px solid
        var(--ijrcsit-border);

    box-shadow:
        0 5px 18px
        rgba(30,67,86,.055);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* CARD HOVER */

.journey-track .journey-card:hover {
    transform: translateY(-5px);

    border-color:
        var(--ijrcsit-blue);

    box-shadow:
        0 12px 25px
        rgba(30,67,86,.10);
}


/* NUMBER */

.journey-track .journey-number {
    display: block;

    margin-bottom: 20px;

    color:
        var(--ijrcsit-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .08em;
}


/* TITLE */

.journey-track .journey-card h3 {
    margin: 0 0 7px;

    color:
        var(--ijrcsit-primary);

    font-size: 16px;

    line-height: 1.25;

    font-weight: 700;
}


/* DESCRIPTION */

.journey-track .journey-card p {
    margin: 0;

    color:
        var(--ijrcsit-muted);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   CONTINUOUS LOOP
========================================================= */

@keyframes journeyLoop {

    from {
        transform: translateX(0);
    }

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

}


/* =========================================================
   PAUSE WHEN USER HOVERS
========================================================= */

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


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

@media (max-width: 650px) {

    .journey-track {
        gap: 10px;

        animation-duration: 24s;
    }

    .journey-track .journey-card {
        flex-basis: 195px;

        width: 195px;

        min-height: 145px;

        padding: 16px 15px;
    }

    .journey-track .journey-card h3 {
        font-size: 15px;
    }

    .journey-track .journey-card p {
        font-size: 11px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

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

    .journey-track {
        animation: none;
    }

}
/* ============================================================
   IJRCSIT — CONFERENCE JOURNEY
   Fresh compact design
   Matches the supplied HTML exactly
   ============================================================ */


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

.ijconf-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.72fr)
        minmax(320px, .68fr);

    gap: 42px;

    align-items: start;
}


/* ============================================================
   MAIN JOURNEY PANEL
   ============================================================ */

.ijconf-journey-panel {

    --journey-bg: #073447;
    --journey-bg-dark: #052a3a;

    --journey-blue: #55bfd0;
    --journey-blue-light: #9ce1e7;

    --journey-white: #ffffff;
    --journey-text: rgba(255,255,255,.82);
    --journey-muted: rgba(255,255,255,.52);

    --journey-line: rgba(255,255,255,.16);

    position: relative;

    width: 100%;

    min-width: 0;

    min-height: 280px;

    box-sizing: border-box;

    padding: 24px 25px 22px;

    overflow: hidden;

    border-radius: 5px;

    background:

        radial-gradient(
            circle at 88% 15%,
            rgba(85,191,208,.17),
            transparent 30%
        ),

        radial-gradient(
            circle at 5% 100%,
            rgba(18,120,138,.18),
            transparent 35%
        ),

        linear-gradient(
            140deg,
            var(--journey-bg-dark),
            var(--journey-bg)
        );

    color:
        var(--journey-white);

    isolation: isolate;
}


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

.ijconf-journey-grid {

    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: .055;

    background-image:

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

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

    background-size: 32px 32px;

    animation:
        journeyGridMove 18s linear infinite;
}


@keyframes journeyGridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(32px);
    }

}


/* ============================================================
   MOVING LIGHT
   ============================================================ */

.ijconf-journey-panel::before {

    content: "";

    position: absolute;

    top: -50%;
    left: -30%;

    width: 35%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );

    transform: rotate(18deg);

    animation:
        journeyLight 8s linear infinite;

    pointer-events: none;

    z-index: 0;
}


@keyframes journeyLight {

    from {
        left: -40%;
    }

    to {
        left: 125%;
    }

}


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

.ijconf-journey-panel::after {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    top: -90px;
    right: -60px;

    border-radius: 50%;

    background:
        rgba(85,191,208,.10);

    filter:
        blur(20px);

    animation:
        journeyGlow 6s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: 0;
}


@keyframes journeyGlow {

    from {
        transform: scale(.8);
        opacity: .4;
    }

    to {
        transform: scale(1.2);
        opacity: .9;
    }

}


/* ============================================================
   REMOVE OLD DECORATIVE ORBITS
   ============================================================ */

.ijconf-journey-orbit {

    display: none !important;
}


/* ============================================================
   PARTICLES
   ============================================================ */

.ijconf-journey-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;
}


.ijconf-journey-particles span {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--journey-blue);

    box-shadow:
        0 0 8px
        rgba(85,191,208,.6);

    opacity: .35;

    animation:
        journeyParticle 4s ease-in-out infinite;
}


.ijconf-journey-particles span:nth-child(1) {
    top: 17%;
    right: 18%;
}

.ijconf-journey-particles span:nth-child(2) {
    top: 32%;
    right: 7%;
    animation-delay: -1s;
}

.ijconf-journey-particles span:nth-child(3) {
    bottom: 25%;
    right: 15%;
    animation-delay: -2s;
}

.ijconf-journey-particles span:nth-child(4) {
    bottom: 14%;
    left: 12%;
    animation-delay: -3s;
}

.ijconf-journey-particles span:nth-child(n+5) {
    display: none;
}


@keyframes journeyParticle {

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

    50% {
        transform: translateY(-8px);
        opacity: .7;
    }

}


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

.ijconf-journey-header {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 16px;

    border-bottom:
        1px solid
        var(--journey-line);
}


.ijconf-journey-header > div {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.ijconf-journey-kicker {

    display: block;

    color:
        var(--journey-blue);

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .14em;
}


.ijconf-journey-header h3 {

    margin: 0;

    max-width: 220px;

    color:
        var(--journey-white);

    font-size: 21px;

    line-height: 1.08;

    font-weight: 750;

    letter-spacing: -.025em;
}


.ijconf-journey-header h3 em {

    color:
        var(--journey-blue);

    font-style: normal;
}


.ijconf-journey-year {

    flex: 0 0 auto;

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

    font-size: 38px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -.07em;
}


/* ============================================================
   REMOVE OLD CENTRAL ORBIT
   ============================================================ */

.ijconf-journey-core {

    display: none !important;
}


/* ============================================================
   JOURNEY PATH
   ============================================================ */

.ijconf-journey-path {

    position: relative;

    z-index: 5;

    display: grid;

    /*
       IMPORTANT:
       Your HTML currently has 3 populated steps.
    */

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 8px;

    margin-top: 21px;

    padding: 0;

    box-sizing: border-box;
}


/* ============================================================
   HIDE EMPTY FOURTH STEP
   ============================================================ */

.ijconf-journey-step[data-step="3"] {

    display: none !important;
}


/* ============================================================
   CONNECTING LINE
   ============================================================ */

.ijconf-journey-line {

    position: absolute;

    top: 14px;

    left: 11%;
    right: 11%;

    height: 1px;

    background:
        rgba(255,255,255,.17);

    z-index: 1;
}


/* Animated signal */

.ijconf-journey-line::after {

    content: "";

    position: absolute;

    top: -1px;
    left: -10%;

    width: 28%;

    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--journey-blue),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(85,191,208,.7);

    animation:
        journeySignal 4s linear infinite;
}


@keyframes journeySignal {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(390%);
    }

}


/* ============================================================
   JOURNEY STEP
   ============================================================ */

.ijconf-journey-step {

    position: relative;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 0 3px;

    box-sizing: border-box;

    z-index: 3;

    transition:
        transform .3s ease;
}


.ijconf-journey-step:hover {

    transform:
        translateY(-3px);
}


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

.ijconf-step-number {

    position: absolute;

    top: -3px;
    left: 0;

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

    font-size: 7px;

    line-height: 1;

    font-weight: 800;
}


/* ============================================================
   STEP DOT
   ============================================================ */

.ijconf-step-dot {

    position: relative;

    z-index: 4;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

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

    box-sizing: border-box;

    border-radius: 50%;

    background:
        var(--journey-bg-dark);

    border:
        1px solid
        rgba(255,255,255,.25);

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


.ijconf-step-dot i {

    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.35);

    transition:
        .3s ease;
}


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

.ijconf-step-content {

    width: 100%;

    min-width: 0;

    margin-top: 9px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    box-sizing: border-box;
}


.ijconf-step-content strong {

    display: block;

    width: 100%;

    max-width: 85px;

    color:
        var(--journey-text);

    font-size: 14px;

    line-height: 1.25;

    font-weight: 750;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;
}


.ijconf-step-content small {

    display: block;

    width: 100%;

    max-width: 85px;

    color:
        var(--journey-muted);

    font-size: 7.5px;

    line-height: 1.2;

    font-weight: 600;

    white-space: normal;
}


/* ============================================================
   ACTIVE STEP
   ============================================================ */

.ijconf-journey-step.is-active
.ijconf-step-dot {

    border-color:
        var(--journey-blue);

    box-shadow:
        0 0 0 4px
        rgba(85,191,208,.07),

        0 0 16px
        rgba(85,191,208,.22);
}


.ijconf-journey-step.is-active
.ijconf-step-dot i {

    background:
        var(--journey-blue);

    box-shadow:
        0 0 10px
        var(--journey-blue);

    animation:
        journeyNodePulse 1.8s ease-in-out infinite;
}


.ijconf-journey-step.is-active
.ijconf-step-content strong {

    color:
        var(--journey-white);
}


@keyframes journeyNodePulse {

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

    50% {
        transform: scale(1.45);
    }

}


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

.ijconf-journey-footer {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 19px;

    padding-top: 11px;

    border-top:
        1px solid
        var(--journey-line);
}


.ijconf-journey-footer span {

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

    font-size: 7px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .07em;
}


.ijconf-journey-footer i {

    width: 3px;
    height: 3px;

    flex: 0 0 3px;

    border-radius: 50%;

    background:
        var(--journey-blue);
}


/* ============================================================
   IMPORTANT:
   DON'T USE 100% HEIGHT
   ============================================================ */

.ijconf-intro-grid
.ijconf-journey-panel {

    height: auto;

    align-self: start;
}


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

@media (max-width: 1050px) {

    .ijconf-intro-grid {

        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(290px, .75fr);

        gap: 28px;
    }


    .ijconf-journey-panel {

        padding-left: 20px;
        padding-right: 20px;
    }


    .ijconf-journey-header h3 {

        font-size: 19px;
    }


    .ijconf-journey-year {

        font-size: 32px;
    }


    .ijconf-step-content strong {

        font-size: 9px;
    }

}


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

@media (max-width: 760px) {

    .ijconf-intro-grid {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .ijconf-journey-panel {

        min-height: 275px;
    }

}


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

@media (max-width: 430px) {

    .ijconf-journey-panel {

        padding:
            21px 17px;
    }


    .ijconf-journey-header h3 {

        font-size: 18px;
    }


    .ijconf-journey-year {

        font-size: 30px;
    }


    .ijconf-journey-path {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 3px;
    }


    .ijconf-step-content strong {

        font-size: 9px;
    }


    .ijconf-step-content small {

        font-size: 7px;
    }


    .ijconf-journey-footer {

        margin-top: 15px;
    }


    .ijconf-journey-footer span {

        font-size: 6px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .ijconf-journey-panel *,
    .ijconf-journey-panel::before,
    .ijconf-journey-panel::after {

        animation: none !important;

        transition: none !important;
    }

}