/* =========================================================
   BITWISE ACADEMY - ABOUT PAGE
   HOME PAGE SAFE
========================================================= */

.bw-about-page,
.bw-about-page * {
    box-sizing: border-box;
}

.bw-about-page {
    --bw-navy: #061d49;
    --bw-navy-dark: #03122f;
    --bw-blue: #075fc7;
    --bw-blue-light: #159cff;
    --bw-red: #c94c4c;
    --bw-red-dark: #8f0b2a;
    --bw-white: #ffffff;
    --bw-soft: #f6f8fc;
    --bw-text: #11233f;
    --bw-muted: #66758b;

    width: 100%;
    overflow: hidden;
    background: #ffffff;
    color: var(--bw-text);
}


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

.bw-about-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}
/* ======================================
   MOBILE NAVBAR FIX
====================================== */

.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px;
    z-index: 1002;
}

.menu-toggle span {
    display: block;
    width: 27px;
    height: 3px;
    margin: 5px 0;
    background: #ffffff;
    border-radius: 3px;
    transition: 0.3s ease;
}

/* Legacy navbar rules removed in favor of navbar.css */



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

.bw-about-hero {
    position: relative;
    min-height: 690px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3, 18, 47, .98) 0%,
            rgba(6, 29, 73, .94) 43%,
            rgba(6, 29, 73, .62) 70%,
            rgba(3, 18, 47, .48) 100%
        ),
        url("assets/hero-trading-floor-pro.jpg") center/cover no-repeat;
}

.bw-about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(7, 95, 199, .28),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(143, 11, 42, .24),
            transparent 30%
        );
}

.bw-about-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr .85fr;
    align-items: center;
    gap: 55px;
}

.bw-about-hero-content {
    max-width: 650px;
}

.bw-about-eyebrow,
.bw-about-small-title {
    display: inline-block;

    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--bw-red);
}

.bw-about-eyebrow {
    color: #ffffff;
}

.bw-about-hero h1 {
    margin: 0;

    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -2px;

    color: #ffffff;
}

.bw-about-hero h1 span {
    display: block;
    color: #ef6969;
}

.bw-about-hero p {
    max-width: 620px;
    margin: 25px 0 28px;

    font-size: 17px;
    line-height: 1.75;

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

.bw-about-hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 150px;
    min-height: 50px;

    padding: 12px 25px;

    border-radius: 7px;

    text-decoration: none;

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

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

.bw-btn:hover {
    transform: translateY(-3px);
}

.bw-btn-red {
    color: #ffffff;
    background: linear-gradient(135deg, #b94141, #8f0b2a);

    box-shadow: 0 12px 25px rgba(143,11,42,.25);
}

.bw-btn-blue {
    color: #ffffff;
    background: linear-gradient(135deg, #4c83ca, #075fc7);

    box-shadow: 0 12px 25px rgba(7,95,199,.24);
}

.bw-about-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 28px;
}

.bw-about-hero-tags span {
    padding: 8px 14px;

    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50px;

    font-size: 12px;
    font-weight: 600;

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

    background: rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
}


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

.bw-about-hero-visual {
    position: relative;
}

.bw-about-image-card {
    position: relative;

    height: 410px;

    overflow: hidden;

    border-radius: 24px;

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

    box-shadow:
        0 30px 70px rgba(0,0,0,.35),
        0 0 50px rgba(7,95,199,.16);
}

.bw-about-image-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 1.2s ease;
}

.bw-about-image-card:hover img {
    transform: scale(1.045);
}

.bw-about-image-shine {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.14) 50%,
            transparent 75%
        );

    transform: translateX(-120%);
    animation: bwImageShine 7s ease-in-out infinite;
}

@keyframes bwImageShine {
    0%, 65% {
        transform: translateX(-120%);
    }

    82%, 100% {
        transform: translateX(120%);
    }
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.bw-about-section {
    padding: 105px 0;
}

.bw-about-white {
    background: #ffffff;
}

.bw-about-light-blue {
    background: #f5f8fd;
}

.bw-about-dark {
    position: relative;
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #03122f 0%,
            #061d49 48%,
            #082d68 100%
        );
}

.bw-about-dark::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(7,95,199,.25),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(143,11,42,.22),
            transparent 27%
        );
}


/* =========================================================
   TWO COLUMN
========================================================= */

.bw-about-two-column {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: start;
    gap: 75px;
}
.bw-about-image-side {
    padding-top: 0;
}

.bw-about-text-side {
    padding-top: 0;
}

.bw-about-side-image {
    margin-top: 0;
}

.bw-about-side-image {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow: 0 25px 60px rgba(6,29,73,.14);
}

.bw-about-side-image {
    position: relative;

    width: 100%;
    height: 560px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow: 0 25px 60px rgba(6,29,73,.14);
}

.bw-about-side-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 1s ease;
}
.bw-about-side-image:hover img {
    transform: scale(1.04);
}

.bw-about-side-label {
    position: absolute;
    left: 25px;
    bottom: 25px;

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

    padding: 16px 20px;

    border-left: 4px solid #e05b5b;

    background: rgba(3,18,47,.88);
    backdrop-filter: blur(10px);

    color: #ffffff;
}

.bw-about-side-label strong {
    font-size: 17px;
    letter-spacing: 2px;
}

.bw-about-side-label span {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #d9e5f5;
}

.bw-about-text-side h2,
.bw-about-heading-center h2,
.bw-mission-content h2,
.bw-final-content h2 {
    margin: 0;

    font-size: clamp(36px, 4vw, 53px);
    line-height: 1.12;
    letter-spacing: -1.3px;

    color: var(--bw-navy);
}

.bw-about-text-side h2 span,
.bw-about-heading-center h2 span,
.bw-mission-content h2 span,
.bw-final-content h2 span {
    color: var(--bw-red);
}

.bw-about-text-side > p {
    margin: 20px 0;

    color: var(--bw-muted);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MINI CARDS
========================================================= */

.bw-about-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    margin-top: 28px;
}

.bw-about-mini-card {
    padding: 21px;

    border: 1px solid #e6ebf3;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 12px 30px rgba(6,29,73,.05);

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

.bw-about-mini-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(6,29,73,.11);
}

.bw-mini-icon {
    width: 39px;
    height: 39px;

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

    margin-bottom: 12px;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 800;

    color: #ffffff;
}

.blue-icon {
    background: linear-gradient(135deg,#4b82c9,#075fc7);
}

.red-icon {
    background: linear-gradient(135deg,#d26868,#8f0b2a);
}

.bw-about-mini-card h3 {
    margin: 0 0 6px;

    font-size: 17px;
    color: var(--bw-navy);
}

.bw-about-mini-card p {
    margin: 0;

    font-size: 13px;
    line-height: 1.6;
    color: var(--bw-muted);
}


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

.bw-about-heading-center {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.bw-about-heading-center p {
    max-width: 650px;

    margin: 18px auto 0;

    color: var(--bw-muted);

    font-size: 16px;
    line-height: 1.7;
}

.bw-about-dark .bw-about-heading-center h2 {
    color: #ffffff;
}

.bw-about-dark .bw-about-heading-center p {
    color: rgba(255,255,255,.70);
}

.light-title {
    color: #e05b5b !important;
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.bw-about-feature-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.bw-about-feature-card {
    position: relative;

    min-height: 260px;

    padding: 35px 30px;

    overflow: hidden;

    border-radius: 20px;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bw-about-feature-card::after {
    content: "";

    position: absolute;
    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

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

    filter: blur(10px);
}

.bw-about-feature-card:hover {
    transform: translateY(-8px);
}

.blue-card {
    background:
        linear-gradient(
            145deg,
            #0b4f9d,
            #06366e
        );

    box-shadow: 0 18px 45px rgba(7,95,199,.22);
}

.red-card {
    background:
        linear-gradient(
            145deg,
            #a63d4b,
            #67162c
        );

    box-shadow: 0 18px 45px rgba(143,11,42,.22);
}

.bw-feature-number {
    display: inline-block;

    margin-bottom: 38px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

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

.bw-about-feature-card h3 {
    margin: 0 0 14px;

    font-size: 25px;

    color: #ffffff;
}

.bw-about-feature-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.75;

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


/* =========================================================
   PHILOSOPHY
========================================================= */

.bw-about-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bw-philosophy-card {
    position: relative;

    padding: 30px 25px;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid #e7ecf3;

    box-shadow: 0 12px 35px rgba(6,29,73,.055);

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

.bw-philosophy-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(6,29,73,.10);
}

.bw-philosophy-line {
    display: block;

    width: 45px;
    height: 4px;

    margin-bottom: 25px;

    border-radius: 5px;
}

.blue-line {
    background: var(--bw-blue);
}

.red-line {
    background: var(--bw-red);
}

.bw-philosophy-card h3 {
    margin: 0 0 12px;

    font-size: 20px;

    color: var(--bw-navy);
}

.bw-philosophy-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: var(--bw-muted);
}


/* =========================================================
   DIFFERENCE CARDS
========================================================= */

.bw-about-difference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bw-difference-card {
    overflow: hidden;

    border-radius: 18px;

    background: #ffffff;

    box-shadow: 0 15px 40px rgba(6,29,73,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bw-difference-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 50px rgba(6,29,73,.13);
}

.bw-difference-image {
    position: relative;

    height: 155px;

    display: flex;
    align-items: flex-end;

    padding: 20px;
}

.blue-gradient {
    background:
        linear-gradient(
            135deg,
            #075fc7,
            #0b2f68
        );
}

.red-gradient {
    background:
        linear-gradient(
            135deg,
            #c85a5a,
            #76172e
        );
}

.bw-difference-image span {
    font-size: 42px;
    font-weight: 800;

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

.bw-difference-content {
    padding: 25px;
}

.bw-difference-content > span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: var(--bw-red);
}

.bw-difference-content h3 {
    margin: 10px 0;

    font-size: 19px;

    color: var(--bw-navy);
}

.bw-difference-content p {
    margin: 0;

    font-size: 13px;
    line-height: 1.7;

    color: var(--bw-muted);
}


/* =========================================================
   STATEMENT
========================================================= */

.bw-about-statement {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(3,18,47,.97),
            rgba(6,29,73,.97)
        ),
        url("assets/market-hd-03.jpg") center/cover;
}

.bw-about-statement-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(143,11,42,.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 40%,
            rgba(7,95,199,.25),
            transparent 35%
        );
}

.bw-statement-inner {
    position: relative;
    z-index: 2;

    text-align: center;
}

.bw-statement-inner h2 {
    max-width: 900px;

    margin: 0 auto;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;

    color: #ffffff;
}

.bw-statement-inner h2 span {
    color: #e05b5b;
}

.bw-statement-inner p {
    max-width: 700px;

    margin: 22px auto 0;

    font-size: 16px;
    line-height: 1.7;

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


/* =========================================================
   MISSION
========================================================= */

.bw-about-mission {
    display: grid;
    grid-template-columns: 1fr .8fr;

    align-items: center;

    gap: 80px;
}

.bw-mission-content p {
    max-width: 600px;

    margin: 20px 0;

    color: var(--bw-muted);

    font-size: 16px;
    line-height: 1.8;
}

.bw-mission-content .bw-btn {
    margin-top: 15px;
}

.bw-mission-visual {
    display: flex;
    justify-content: center;
}

.bw-mission-circle {
    width: 360px;
    height: 360px;

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

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            #075fc7,
            #159cff,
            #c94c4c,
            #8f0b2a,
            #075fc7
        );

    padding: 15px;

    animation: bwCircleRotate 18s linear infinite;
}

.bw-circle-inner {
    width: 100%;
    height: 100%;

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

    gap: 5px;

    border-radius: 50%;

    background: #061d49;

    color: #ffffff;

    box-shadow:
        inset 0 0 50px rgba(0,0,0,.25),
        0 20px 50px rgba(6,29,73,.20);
}

.bw-circle-inner span {
    margin-bottom: 10px;

    font-size: 11px;
    letter-spacing: 3px;

    color: #e05b5b;
}

.bw-circle-inner strong {
    font-size: 18px;
    letter-spacing: 1px;
}

@keyframes bwCircleRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   FINAL CTA
========================================================= */

.bw-about-final {
    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #03122f 0%,
            #061d49 60%,
            #08285a 100%
        );
}

.bw-about-final-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    right: -150px;
    top: -200px;

    border-radius: 50%;

    background: rgba(143,11,42,.25);

    filter: blur(50px);
}

.bw-final-content {
    position: relative;
    z-index: 2;

    text-align: center;
}

.bw-final-content h2 {
    color: #ffffff;
}

.bw-final-content p {
    max-width: 680px;

    margin: 22px auto 30px;

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

    font-size: 16px;
    line-height: 1.7;
}


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

.bw-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.65,.25,1);
}

.bw-reveal.bw-visible {
    opacity: 1;
    transform: translateY(0);
}

.bw-delay-1 {
    transition-delay: .12s;
}

.bw-delay-2 {
    transition-delay: .22s;
}

.bw-delay-3 {
    transition-delay: .32s;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .bw-about-hero-grid {
        grid-template-columns: 1fr;
    }

    .bw-about-hero {
        padding: 90px 0;
    }

    .bw-about-hero-content {
        max-width: 800px;
    }

    .bw-about-hero-visual {
        max-width: 700px;
    }

    .bw-about-two-column,
    .bw-about-mission {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .bw-about-philosophy-grid,
    .bw-about-difference-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 700px) {

    .bw-about-container {
        width: min(100% - 28px, 1180px);
    }

    .bw-about-section {
        padding: 75px 0;
    }

    .bw-about-hero {
        min-height: auto;
        padding: 75px 0;
    }

    .bw-about-hero h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .bw-about-hero p {
        font-size: 15px;
    }

    .bw-about-image-card {
        height: 300px;
    }

    .bw-about-side-image,
    .bw-about-side-image img {
        min-height: 350px;
        height: 350px;
    }

    .bw-about-mini-grid,
    .bw-about-feature-grid,
    .bw-about-philosophy-grid,
    .bw-about-difference-grid {
        grid-template-columns: 1fr;
    }

    .bw-about-heading-center {
        margin-bottom: 38px;
    }

    .bw-about-heading-center h2,
    .bw-about-text-side h2,
    .bw-mission-content h2,
    .bw-final-content h2 {
        font-size: 36px;
    }

    .bw-about-statement {
        padding: 85px 0;
    }

    .bw-statement-inner h2 {
        font-size: 42px;
    }

    .bw-mission-visual {
        margin-top: 10px;
    }

    .bw-mission-circle {
        width: 290px;
        height: 290px;
    }

    .bw-about-hero-buttons {
        width: 100%;
    }

    .bw-btn {
        width: 100%;
    }

    .bw-about-hero-tags {
        gap: 7px;
    }

    .bw-about-hero-tags span {
        font-size: 10px;
    }
}


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

    .bw-about-page *,
    .bw-about-page *::before,
    .bw-about-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .bw-reveal {
        opacity: 1;
        transform: none;
    }
}
/* =========================================================
   BITWISE LEARNING JOURNEY CARDS
========================================================= */

.bw-learning-journey {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    margin-top: 35px;
}

.bw-journey-card {
    position: relative;

    min-height: 245px;

    padding: 30px;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid #e1e8f2;

    box-shadow:
        0 15px 40px rgba(6,29,73,.06);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* BIG BACKGROUND NUMBER */

.bw-journey-bg-number {
    position: absolute;

    right: -10px;
    bottom: -35px;

    font-size: 150px;
    line-height: 1;

    font-weight: 900;

    color: rgba(6,29,73,.035);

    pointer-events: none;

    transition:
        transform .5s ease,
        color .5s ease;
}


/* TOP */

.bw-journey-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* NUMBER */

.bw-journey-number {
    width: 50px;
    height: 50px;

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

    border-radius: 14px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(7,95,199,.20);
}

.bw-journey-blue .bw-journey-number {
    background:
        linear-gradient(
            135deg,
            #4386d9,
            #075fc7
        );
}

.bw-journey-red .bw-journey-number {
    background:
        linear-gradient(
            135deg,
            #d76565,
            #8f0b2a
        );
}


/* ICON */

.bw-journey-icon {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

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

    color: var(--bw-navy);

    background: #f4f7fb;

    border: 1px solid #e3eaf3;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


/* CONTENT */

.bw-journey-content {
    position: relative;
    z-index: 2;

    margin-top: 27px;
}

.bw-journey-label {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;

    color: #7a8799;
}

.bw-journey-content h3 {
    margin: 0 0 10px;

    font-size: 27px;

    color: var(--bw-navy);
}

.bw-journey-content p {
    max-width: 310px;

    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #65758c;
}


/* BOTTOM ACCENT */

.bw-journey-line {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 18px;

    height: 2px;

    transform-origin: left;

    transform: scaleX(.15);

    transition:
        transform .5s ease;
}

.bw-journey-blue .bw-journey-line {
    background:
        linear-gradient(
            90deg,
            #075fc7,
            transparent
        );
}

.bw-journey-red .bw-journey-line {
    background:
        linear-gradient(
            90deg,
            #8f0b2a,
            transparent
        );
}


/* HOVER */

.bw-journey-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 55px rgba(6,29,73,.12);
}

.bw-journey-card:hover .bw-journey-bg-number {
    transform: translateY(-8px) scale(1.04);

    color: rgba(7,95,199,.07);
}

.bw-journey-red:hover .bw-journey-bg-number {
    color: rgba(143,11,42,.07);
}

.bw-journey-card:hover .bw-journey-icon {
    transform: rotate(-8deg) scale(1.08);

    color: #ffffff;
}

.bw-journey-blue:hover .bw-journey-icon {
    background: #075fc7;
}

.bw-journey-red:hover .bw-journey-icon {
    background: #8f0b2a;
}

.bw-journey-card:hover .bw-journey-line {
    transform: scaleX(1);
}


/* TOP EDGE GLOW */

.bw-journey-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .5s ease;
}

.bw-journey-blue::before {
    background: linear-gradient(
        90deg,
        #075fc7,
        #159cff
    );
}

.bw-journey-red::before {
    background: linear-gradient(
        90deg,
        #8f0b2a,
        #d76565
    );
}

.bw-journey-card:hover::before {
    transform: scaleX(1);
}


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

@media (max-width: 700px) {

    .bw-learning-journey {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bw-journey-card {
        min-height: 220px;
        padding: 25px;
    }

    .bw-journey-content h3 {
        font-size: 24px;
    }

    .bw-journey-bg-number {
        font-size: 120px;
    }
}
/* =========================================================
   WHO WE ARE - LEARNING JOURNEY BELOW IMAGE + CONTENT
========================================================= */

.bw-about-two-column {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: start;
    gap: 70px;
}


/* FOUR CARDS IN ONE ROW */

.bw-learning-journey {
    width: 100%;

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

    gap: 18px;

    margin-top: 55px;
    margin-bottom: 15px;
}


/* CARD */

.bw-journey-card {
    position: relative;

    min-height: 225px;

    padding: 25px 22px;

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid #e1e8f2;

    box-shadow:
        0 12px 35px rgba(6,29,73,.06);

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


/* TOP COLOUR LINE */

.bw-journey-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .4s ease;
}

.bw-journey-blue::before {
    background: linear-gradient(
        90deg,
        #075fc7,
        #159cff
    );
}

.bw-journey-red::before {
    background: linear-gradient(
        90deg,
        #8f0b2a,
        #d76565
    );
}


/* LARGE BACKGROUND NUMBER */

.bw-journey-bg-number {
    position: absolute;

    right: -8px;
    bottom: -25px;

    font-size: 105px;

    line-height: 1;

    font-weight: 900;

    color: rgba(6,29,73,.035);

    pointer-events: none;

    transition: transform .4s ease;
}


/* TOP */

.bw-journey-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* NUMBER BOX */

.bw-journey-number {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 13px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 9px 22px rgba(7,95,199,.18);
}

.bw-journey-blue .bw-journey-number {
    background:
        linear-gradient(
            135deg,
            #4386d9,
            #075fc7
        );
}

.bw-journey-red .bw-journey-number {
    background:
        linear-gradient(
            135deg,
            #d76565,
            #8f0b2a
        );
}


/* ICON */

.bw-journey-icon {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    background: #f5f8fc;

    border: 1px solid #e2e9f2;

    color: #061d49;

    font-size: 18px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


/* CONTENT */

.bw-journey-content {
    position: relative;

    z-index: 2;

    margin-top: 22px;
}

.bw-journey-label {
    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #77869a;
}

.bw-journey-content h3 {
    margin: 0 0 8px;

    font-size: 23px;

    color: #061d49;
}

.bw-journey-content p {
    margin: 0;

    font-size: 13px;

    line-height: 1.6;

    color: #64758d;
}


/* BOTTOM MOVING LINE */

.bw-journey-line {
    position: absolute;

    left: 22px;
    right: 22px;

    bottom: 14px;

    height: 2px;

    background: #edf1f6;

    overflow: hidden;
}

.bw-journey-line::after {
    content: "";

    position: absolute;

    left: -100%;
    top: 0;

    width: 100%;
    height: 100%;

    animation: bwJourneyLine 3s linear infinite;
}

.bw-journey-blue .bw-journey-line::after {
    background: #075fc7;
}

.bw-journey-red .bw-journey-line::after {
    background: #c94c4c;
}

@keyframes bwJourneyLine {

    from {
        left: -100%;
    }

    to {
        left: 100%;
    }

}


/* HOVER */

.bw-journey-card:hover {

    transform: translateY(-9px);

    box-shadow:
        0 25px 50px rgba(6,29,73,.12);

    border-color: rgba(7,95,199,.20);
}

.bw-journey-card:hover::before {
    transform: scaleX(1);
}

.bw-journey-card:hover .bw-journey-bg-number {
    transform: translateY(-7px) scale(1.05);
}

.bw-journey-card:hover .bw-journey-icon {
    transform: rotate(-8deg) scale(1.08);

    color: #ffffff;
}

.bw-journey-blue:hover .bw-journey-icon {
    background: #075fc7;
}

.bw-journey-red:hover .bw-journey-icon {
    background: #8f0b2a;
}


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

@media (max-width: 1000px) {

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

}


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

@media (max-width: 700px) {

    .bw-about-two-column {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .bw-learning-journey {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 40px;
    }

    .bw-journey-card {
        min-height: 210px;
    }

}
/* =========================================================
   PREMIUM WATERMARK LEARNING CARDS
========================================================= */

.bw-journey-card {
    position: relative;
    isolation: isolate;

    min-height: 225px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 65%,
            #f8faff 100%
        );

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* =========================================================
   HUGE WATERMARK
========================================================= */

.bw-watermark {
    position: absolute;

    right: -18px;
    bottom: -10px;

    z-index: 0;

    font-size: 66px;
    line-height: .85;

    font-weight: 900;

    letter-spacing: -3px;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;

    transform: rotate(-7deg);

    opacity: .055;

    animation:
        bwWatermarkFloat 7s ease-in-out infinite;
}


/* BLUE WATERMARK */

.bw-journey-blue .bw-watermark {
    color: #075fc7;

    text-shadow:
        0 0 30px rgba(7,95,199,.12);
}


/* RED WATERMARK */

.bw-journey-red .bw-watermark {
    color: #8f0b2a;

    text-shadow:
        0 0 30px rgba(143,11,42,.12);

    animation-delay: -3s;
}


/* WATERMARK MOVEMENT */

@keyframes bwWatermarkFloat {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(-7deg);
    }

    50% {
        transform:
            translate3d(-10px, -8px, 0)
            rotate(-5deg);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-7deg);
    }
}


/* =========================================================
   SUBTLE WATERMARK RING
========================================================= */

.bw-journey-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -85px;
    bottom: -95px;

    z-index: -1;

    border-radius: 50%;

    border: 1px solid rgba(7,95,199,.10);

    box-shadow:
        0 0 0 25px rgba(7,95,199,.025),
        0 0 0 50px rgba(7,95,199,.015);

    animation:
        bwWatermarkRing 6s ease-in-out infinite;
}

.bw-journey-red::after {
    border-color: rgba(143,11,42,.10);

    box-shadow:
        0 0 0 25px rgba(143,11,42,.025),
        0 0 0 50px rgba(143,11,42,.015);
}

@keyframes bwWatermarkRing {

    0%,
    100% {
        transform: scale(.92);
        opacity: .55;
    }

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


/* =========================================================
   CONTENT ALWAYS ABOVE WATERMARK
========================================================= */

.bw-journey-top,
.bw-journey-content,
.bw-journey-line {
    position: relative;
    z-index: 3;
}


/* =========================================================
   NUMBER BADGE PREMIUM EFFECT
========================================================= */

.bw-journey-number {
    position: relative;

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* moving shine inside number */

.bw-journey-number::after {
    content: "";

    position: absolute;

    top: -50%;
    left: -100%;

    width: 60%;
    height: 200%;

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

    transform: rotate(20deg);

    animation:
        bwNumberShine 4.5s ease-in-out infinite;
}

@keyframes bwNumberShine {

    0%,
    60% {
        left: -100%;
    }

    80%,
    100% {
        left: 160%;
    }
}


/* =========================================================
   ICON PREMIUM PULSE
========================================================= */

.bw-journey-icon {
    position: relative;

    z-index: 4;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}

.bw-journey-icon::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid currentColor;

    opacity: 0;

    transform: scale(.7);

    animation:
        bwIconPulse 3.5s ease-out infinite;
}

@keyframes bwIconPulse {

    0% {
        opacity: 0;
        transform: scale(.7);
    }

    20% {
        opacity: .18;
    }

    60% {
        opacity: 0;
        transform: scale(1.25);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   CARD LIGHT SWEEP
========================================================= */

.bw-journey-card .bw-card-light {
    position: absolute;

    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    pointer-events: none;

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

    transform: skewX(-18deg);

    opacity: .35;

    animation:
        bwCardLightSweep 8s ease-in-out infinite;
}

@keyframes bwCardLightSweep {

    0%,
    65% {
        left: -100%;
    }

    82%,
    100% {
        left: 150%;
    }
}


/* =========================================================
   CARD HOVER
========================================================= */

.bw-journey-card:hover {

    transform:
        translateY(-10px)
        scale(1.015);

    box-shadow:
        0 28px 60px rgba(6,29,73,.13);
}


/* WATERMARK BECOMES SLIGHTLY STRONGER */

.bw-journey-card:hover .bw-watermark {

    opacity: .095;

    transform:
        translate(-8px,-10px)
        rotate(-5deg)
        scale(1.03);
}


/* ICON HOVER */

.bw-journey-card:hover .bw-journey-icon {

    transform:
        rotate(-8deg)
        scale(1.1);

    box-shadow:
        0 10px 25px rgba(7,95,199,.16);
}

.bw-journey-red:hover .bw-journey-icon {

    box-shadow:
        0 10px 25px rgba(143,11,42,.16);
}


/* NUMBER HOVER */

.bw-journey-card:hover .bw-journey-number {

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(7,95,199,.25);
}


/* =========================================================
   ELEGANT CARD BORDER GLOW
========================================================= */

.bw-journey-blue:hover {

    border-color:
        rgba(7,95,199,.28);
}

.bw-journey-red:hover {

    border-color:
        rgba(143,11,42,.28);
}


/* =========================================================
   DIFFERENT WATERMARK POSITIONS
========================================================= */

.bw-journey-card:nth-child(1) .bw-watermark {
    right: -15px;
    bottom: -8px;
}

.bw-journey-card:nth-child(2) .bw-watermark {
    right: -25px;
    bottom: -12px;
}

.bw-journey-card:nth-child(3) .bw-watermark {
    right: -30px;
    bottom: -5px;
}

.bw-journey-card:nth-child(4) .bw-watermark {
    right: -20px;
    bottom: -12px;
}


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

@media (max-width: 1000px) {

    .bw-watermark {
        font-size: 55px;
    }

}


@media (max-width: 700px) {

    .bw-watermark {
        font-size: 70px;
    }

}
/* =========================================================
   PREMIUM VISION CARDS
========================================================= */

.bw-vision-cards {
    display: grid;

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

    gap: 24px;

    position: relative;

    z-index: 3;
}


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

.bw-vision-card {

    position: relative;

    height: 455px;

    overflow: hidden;

    border-radius: 24px;

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

    background: #061d49;

    box-shadow:
        0 25px 55px rgba(0,0,0,.22);

    isolation: isolate;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .55s ease,
        border-color .45s ease;
}


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

.bw-vision-image {

    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;
}

.bw-vision-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1),
        filter 1s ease;
}


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

.bw-vision-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,18,47,.18) 0%,
            rgba(3,18,47,.38) 35%,
            rgba(3,18,47,.92) 100%
        );
}


/* BLUE CARD */

.bw-vision-blue .bw-vision-image-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(3,30,70,.15),
            rgba(3,30,70,.40) 35%,
            rgba(2,18,48,.97) 100%
        );
}


/* RED CARD */

.bw-vision-red .bw-vision-image-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(95,12,35,.18),
            rgba(95,12,35,.42) 35%,
            rgba(35,5,18,.97) 100%
        );
}


/* =========================================================
   LARGE WATERMARK NUMBER
========================================================= */

.bw-vision-watermark {

    position: absolute;

    right: -8px;

    top: 55px;

    font-size: 170px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -12px;

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

    pointer-events: none;

    user-select: none;

    transition:
        transform .6s ease,
        color .6s ease;
}


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

.bw-vision-number {

    position: absolute;

    top: 30px;

    left: 30px;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #3d83d8,
            #075fc7
        );

    box-shadow:
        0 10px 30px rgba(7,95,199,.30);

    backdrop-filter: blur(8px);

    z-index: 5;
}


.bw-vision-red .bw-vision-number {

    background:
        linear-gradient(
            135deg,
            #df666b,
            #8f0b2a
        );

    box-shadow:
        0 10px 30px rgba(143,11,42,.30);
}


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

.bw-vision-content {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 82px;

    z-index: 5;
}


/* LABEL */

.bw-vision-label {

    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #72baff;
}


.bw-vision-red .bw-vision-label {

    color: #ff8585;
}


/* TITLE */

.bw-vision-content h3 {

    margin: 0 0 13px;

    font-size: 34px;

    line-height: 1.02;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: -1px;
}


.bw-vision-content h3 span {

    display: block;

    color: #159cff;
}


.bw-vision-red .bw-vision-content h3 span {

    color: #ff636b;
}


/* DESCRIPTION */

.bw-vision-content p {

    max-width: 350px;

    margin: 0;

    font-size: 14px;

    line-height: 1.65;

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


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

.bw-vision-action {

    position: absolute;

    left: 30px;

    bottom: 27px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #ffffff;
}


/* ARROW CIRCLE */

.bw-vision-arrow {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid #159cff;

    color: #ffffff;

    font-size: 22px;

    letter-spacing: 0;

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


.bw-vision-red .bw-vision-arrow {

    border-color: #ff5964;
}


/* =========================================================
   GLOW AT BOTTOM
========================================================= */

.bw-vision-card::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -100px;

    width: 280px;

    height: 180px;

    transform: translateX(-50%);

    border-radius: 50%;

    filter: blur(45px);

    opacity: .35;

    z-index: -1;

    pointer-events: none;
}


.bw-vision-blue::after {

    background: #075fc7;
}


.bw-vision-red::after {

    background: #8f0b2a;
}


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

.bw-vision-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 70%;

    height: 100%;

    z-index: 4;

    pointer-events: none;

    transform: skewX(-18deg);

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

    animation:
        bwVisionLight 8s ease-in-out infinite;
}


@keyframes bwVisionLight {

    0%,
    62% {
        left: -130%;
    }

    82%,
    100% {
        left: 150%;
    }

}


/* =========================================================
   HOVER
========================================================= */

.bw-vision-card:hover {

    transform:
        translateY(-12px)
        scale(1.015);

    box-shadow:
        0 35px 75px rgba(0,0,0,.30);

    border-color:
        rgba(21,156,255,.65);
}


.bw-vision-red:hover {

    border-color:
        rgba(255,89,100,.65);
}


.bw-vision-card:hover .bw-vision-image img {

    transform: scale(1.08);

    filter:
        saturate(1.15)
        contrast(1.05);
}


.bw-vision-card:hover .bw-vision-watermark {

    transform:
        translate(-10px,-8px)
        scale(1.04);

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


.bw-vision-card:hover .bw-vision-arrow {

    transform: translateX(6px);

    background: #075fc7;

    box-shadow:
        0 8px 25px rgba(7,95,199,.35);
}


.bw-vision-red:hover .bw-vision-arrow {

    background: #8f0b2a;

    box-shadow:
        0 8px 25px rgba(143,11,42,.35);
}


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

@media (max-width: 1000px) {

    .bw-vision-cards {

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

    }

}


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

@media (max-width: 700px) {

    .bw-vision-cards {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .bw-vision-card {

        height: 430px;

    }

    .bw-vision-content h3 {

        font-size: 30px;

    }

    .bw-vision-watermark {

        font-size: 135px;

    }

}
/* =========================================================
   BITWISE ACADEMY
   OUR PHILOSOPHY - PREMIUM FINTECH CARDS
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.bw-philosophy {
    position: relative;

    width: 100%;

    padding: 105px 6% 100px;

    background: #ffffff;

    overflow: hidden;
}


/* Very subtle background glow */

.bw-philosophy::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    left: -180px;

    background: radial-gradient(
        circle,
        rgba(21,156,255,0.08),
        transparent 70%
    );

    pointer-events: none;
}


.bw-philosophy::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    bottom: -300px;
    right: -180px;

    background: radial-gradient(
        circle,
        rgba(217,23,61,0.07),
        transparent 70%
    );

    pointer-events: none;
}


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

.bw-philosophy-container {
    position: relative;

    max-width: 1320px;

    margin: 0 auto;

    z-index: 2;
}


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

.bw-philosophy-heading {
    max-width: 900px;

    margin: 0 auto 70px;

    text-align: center;
}


/* Small title */

.bw-philosophy-label {
    display: inline-block;

    margin-bottom: 25px;

    color: #d9173d;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    position: relative;
}


/* Small animated line */

.bw-philosophy-label::after {
    content: "";

    display: block;

    width: 45px;
    height: 3px;

    margin: 12px auto 0;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #075fc7,
        #159cff,
        #d9173d
    );

    background-size: 200% 100%;

    animation: philosophyLabelGradient 4s ease infinite;
}


@keyframes philosophyLabelGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* Main heading */

.bw-philosophy-heading h2 {
    margin: 0;

    color: #061d49;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
}


/* Red part */

.bw-philosophy-heading h2 span {
    display: inline-block;

    color: #d9173d;

    margin-left: 8px;

    position: relative;
}


/* Animated shine on red heading */

.bw-philosophy-heading h2 span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 100%;
    height: 3px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #8f0b2a,
        #d9173d,
        #159cff,
        #d9173d
    );

    background-size: 300% 100%;

    animation: headingShine 5s linear infinite;
}


@keyframes headingShine {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }

}


/* Description */

.bw-philosophy-heading p {
    max-width: 780px;

    margin: 28px auto 0;

    color: #667995;

    font-size: 18px;

    line-height: 1.8;

    letter-spacing: .2px;
}


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

.bw-philosophy-grid {

    display: grid;

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

    gap: 22px;

    width: 100%;
}


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

.bw-philosophy-card {

    position: relative;

    min-height: 265px;

    padding: 38px 32px;

    border-radius: 22px;

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

    border: 1px solid rgba(7,95,199,.12);

    overflow: hidden;

    isolation: isolate;

    box-shadow:
        0 12px 35px rgba(6,29,73,.06);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease,
        border-color .5s ease;
}


/* =========================================================
   ANIMATED GRADIENT BORDER
========================================================= */

.bw-philosophy-card::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 22px;

    background:
        linear-gradient(
            120deg,
            #075fc7,
            #159cff,
            #ffffff,
            #8f0b2a,
            #d9173d,
            #075fc7
        );

    background-size: 350% 350%;

    animation:
        philosophyBorder 8s ease infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

    z-index: -1;
}


@keyframes philosophyBorder {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* =========================================================
   CARD BACKGROUND LIGHT
========================================================= */

.bw-philosophy-card::after {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    top: -130px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21,156,255,.16),
            rgba(21,156,255,.06) 40%,
            transparent 72%
        );

    filter: blur(3px);

    animation:
        cardOrb 7s ease-in-out infinite;

    pointer-events: none;

    z-index: -1;
}


.red-card::after {

    background:
        radial-gradient(
            circle,
            rgba(217,23,61,.15),
            rgba(217,23,61,.05) 40%,
            transparent 72%
        );
}


@keyframes cardOrb {

    0% {
        transform: translate(0,0);
        opacity: .5;
    }

    50% {
        transform: translate(-45px,80px);
        opacity: 1;
    }

    100% {
        transform: translate(0,0);
        opacity: .5;
    }

}


/* =========================================================
   TOP ACCENT
========================================================= */

.bw-card-accent {

    position: relative;

    width: 58px;
    height: 5px;

    margin-bottom: 30px;

    border-radius: 50px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #075fc7,
            #159cff
        );

    box-shadow:
        0 0 12px rgba(21,156,255,.25);

    transition:
        width .5s ease,
        box-shadow .5s ease;
}


/* Red accent */

.red-card .bw-card-accent {

    background:
        linear-gradient(
            90deg,
            #8f0b2a,
            #d9173d
        );

    box-shadow:
        0 0 12px rgba(217,23,61,.25);
}


/* =========================================================
   ACCENT SHINE
========================================================= */

.bw-card-accent::after {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 65%;
    height: 100%;

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

    animation:
        accentSweep 3.5s ease-in-out infinite;
}


@keyframes accentSweep {

    0% {
        left: -100%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }

}


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

.bw-card-number {

    position: absolute;

    top: 25px;
    right: 28px;

    font-size: 52px;

    line-height: 1;

    font-weight: 800;

    color: rgba(6,29,73,.045);

    letter-spacing: -2px;

    transition:
        color .4s ease,
        transform .5s ease;
}


.red-card .bw-card-number {
    color: rgba(143,11,42,.05);
}


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

.bw-card-content {

    position: relative;

    z-index: 3;
}


/* Heading */

.bw-card-content h3 {

    margin: 0 0 17px;

    color: #061d49;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 800;

    transition:
        transform .4s ease,
        color .4s ease;
}


/* Paragraph */

.bw-card-content p {

    margin: 0;

    max-width: 280px;

    color: #5b708f;

    font-size: 16px;

    line-height: 1.75;

    transition:
        color .4s ease;
}


/* =========================================================
   BLUE CARD HOVER
========================================================= */

.blue-card:hover {

    transform: translateY(-10px);

    border-color: rgba(7,95,199,.3);

    box-shadow:
        0 25px 55px rgba(6,29,73,.11),
        0 12px 35px rgba(7,95,199,.13);
}


.blue-card:hover .bw-card-accent {

    width: 100px;

    box-shadow:
        0 0 20px rgba(21,156,255,.5);
}


.blue-card:hover .bw-card-content h3 {

    transform: translateX(5px);

    color: #075fc7;
}


.blue-card:hover .bw-card-number {

    color: rgba(7,95,199,.10);

    transform: scale(1.08);
}


/* =========================================================
   RED CARD HOVER
========================================================= */

.red-card:hover {

    transform: translateY(-10px);

    border-color: rgba(217,23,61,.3);

    box-shadow:
        0 25px 55px rgba(6,29,73,.11),
        0 12px 35px rgba(217,23,61,.13);
}


.red-card:hover .bw-card-accent {

    width: 100px;

    box-shadow:
        0 0 20px rgba(217,23,61,.5);
}


.red-card:hover .bw-card-content h3 {

    transform: translateX(5px);

    color: #d9173d;
}


.red-card:hover .bw-card-number {

    color: rgba(217,23,61,.10);

    transform: scale(1.08);
}


/* =========================================================
   EXTRA CARD LIGHT
========================================================= */

.bw-card-glow {

    position: absolute;

    width: 100px;
    height: 100px;

    left: -80px;
    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21,156,255,.22),
            transparent 70%
        );

    filter: blur(10px);

    transition:
        transform .7s ease,
        opacity .5s ease;

    pointer-events: none;
}


.red-card .bw-card-glow {

    background:
        radial-gradient(
            circle,
            rgba(217,23,61,.22),
            transparent 70%
        );
}


.bw-philosophy-card:hover .bw-card-glow {

    transform: translate(
        170px,
        -120px
    );

    opacity: 1;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {

    .bw-philosophy {

        padding-left: 4%;
        padding-right: 4%;
    }

    .bw-philosophy-grid {

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

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 700px) {

    .bw-philosophy {

        padding:
            75px 20px
            70px;
    }


    .bw-philosophy-heading {

        margin-bottom: 45px;
    }


    .bw-philosophy-heading h2 {

        font-size: 40px;

        letter-spacing: -1.5px;
    }


    .bw-philosophy-heading h2 span {

        display: block;

        margin-left: 0;
    }


    .bw-philosophy-heading p {

        font-size: 16px;
    }


    .bw-philosophy-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .bw-philosophy-card {

        min-height: 235px;

        padding: 32px 27px;
    }


    .bw-philosophy-card:hover {

        transform: translateY(-5px);
    }


    .bw-card-content h3 {

        font-size: 23px;
    }


    .bw-card-content p {

        font-size: 15px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .bw-philosophy *,
    .bw-philosophy *::before,
    .bw-philosophy *::after {

        animation: none !important;

        transition: none !important;
    }

}
/* =========================================================
   PHILOSOPHY CARD WATERMARK
========================================================= */

.bw-card-watermark {
    position: absolute;

    left: -12px;
    bottom: 5px;

    font-size: 58px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

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

    white-space: nowrap;

    pointer-events: none;

    z-index: 1;

    user-select: none;

    transform: rotate(-8deg);

    transition:
        transform .6s ease,
        color .6s ease,
        opacity .6s ease;
}


/* Blue watermark */

.blue-card .bw-card-watermark {
    color: rgba(255,255,255,0.075);
}


/* Maroon watermark */

.red-card .bw-card-watermark {
    color: rgba(255,255,255,0.085);
}


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

@keyframes philosophyWatermark {

    0% {
        transform: translateX(0) rotate(-8deg);
    }

    50% {
        transform: translateX(12px) rotate(-8deg);
    }

    100% {
        transform: translateX(0) rotate(-8deg);
    }

}


.bw-card-watermark {
    animation:
        philosophyWatermark 6s ease-in-out infinite;
}


/* =========================================================
   HOVER WATERMARK
========================================================= */

.bw-philosophy-card:hover .bw-card-watermark {

    transform:
        translateX(20px)
        rotate(-8deg)
        scale(1.04);

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


/* =========================================================
   KEEP CONTENT ABOVE WATERMARK
========================================================= */

.bw-card-content {
    position: relative;
    z-index: 5;
}

.bw-card-accent {
    position: relative;
    z-index: 6;
}

.bw-card-number {
    z-index: 4;
}


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

@media (max-width: 700px) {

    .bw-card-watermark {
        font-size: 48px;
        bottom: 8px;
    }

}
/* =========================================================
   WHY BITWISE ACADEMY
   COLOUR CARDS - NO IMAGES
========================================================= */

.bw-why-cards {
    width: 100%;

    display: grid;

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

    gap: 24px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.bw-why-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(6,29,73,.09);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    isolation: isolate;
}


/* =========================================================
   COLOURED TOP AREA
========================================================= */

.bw-why-card-top {

    position: relative;

    height: 193px;

    overflow: hidden;
}


/* =========================================================
   BLUE TOP
========================================================= */

.bw-why-blue .bw-why-card-top {

    background:
        linear-gradient(
            135deg,
            #075fc7 0%,
            #0753a9 45%,
            #06336f 100%
        );
}


/* =========================================================
   MAROON TOP
========================================================= */

.bw-why-maroon .bw-why-card-top {

    background:
        linear-gradient(
            135deg,
            #c9575e 0%,
            #9f243f 45%,
            #650820 100%
        );
}


/* =========================================================
   TOP LIGHT
========================================================= */

.bw-why-card-top::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -170px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.22),
            transparent 68%
        );

    filter: blur(4px);

    animation:
        bwWhyOrb 7s ease-in-out infinite;

    pointer-events: none;
}


@keyframes bwWhyOrb {

    0% {
        transform: translate(0,0);
        opacity: .45;
    }

    50% {
        transform: translate(-35px,70px);
        opacity: .9;
    }

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

}


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

.bw-why-number {

    position: absolute;

    left: 25px;
    bottom: 38px;

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

    font-size: 55px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    z-index: 3;

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


/* =========================================================
   WATERMARK
========================================================= */

.bw-why-watermark {

    position: absolute;

    left: -8px;
    bottom: -3px;

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

    font-size: 54px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -2px;

    white-space: nowrap;

    transform: rotate(-7deg);

    pointer-events: none;

    z-index: 2;

    animation:
        bwWhyWatermark 6s ease-in-out infinite;
}


@keyframes bwWhyWatermark {

    0% {
        transform: translateX(0) rotate(-7deg);
    }

    50% {
        transform: translateX(10px) rotate(-7deg);
    }

    100% {
        transform: translateX(0) rotate(-7deg);
    }

}


/* =========================================================
   MOVING SHINE
========================================================= */

.bw-why-shine {

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

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

    transform: skewX(-18deg);

    animation:
        bwWhyShine 5s ease-in-out infinite;

    pointer-events: none;

    z-index: 4;
}


@keyframes bwWhyShine {

    0% {
        left: -120%;
    }

    45% {
        left: 150%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   WHITE CONTENT AREA
========================================================= */

.bw-why-card-content {

    position: relative;

    min-height: 240px;

    padding: 40px 32px 34px;

    background: #ffffff;

    z-index: 5;
}


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

.bw-why-label {

    display: block;

    margin-bottom: 24px;

    color: #d9173d;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;

    line-height: 1;
}


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

.bw-why-card-content h3 {

    margin: 0 0 18px;

    color: #061d49;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.25;

    transition:
        color .35s ease,
        transform .35s ease;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.bw-why-card-content p {

    margin: 0;

    color: #5f7390;

    font-size: 15.5px;

    line-height: 1.75;
}


/* =========================================================
   HOVER
========================================================= */

.bw-why-card:hover {

    transform: translateY(-9px);

    box-shadow:
        0 28px 60px rgba(6,29,73,.14);
}


.bw-why-blue:hover {

    box-shadow:
        0 28px 60px rgba(7,95,199,.20);
}


.bw-why-maroon:hover {

    box-shadow:
        0 28px 60px rgba(143,11,42,.20);
}


.bw-why-card:hover .bw-why-number {

    transform: scale(1.08);

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


.bw-why-card:hover .bw-why-watermark {

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

    transform:
        translateX(18px)
        rotate(-7deg)
        scale(1.04);
}


.bw-why-card:hover .bw-why-card-content h3 {

    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .bw-why-cards {

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

}


@media (max-width: 700px) {

    .bw-why-cards {

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .bw-why-card-top {

        height: 175px;
    }

    .bw-why-card-content {

        padding: 32px 27px;
    }

    .bw-why-card-content h3 {

        font-size: 22px;
    }

    .bw-why-card:hover {

        transform: translateY(-5px);
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .bw-why-card *,
    .bw-why-card *::before,
    .bw-why-card *::after {

        animation: none !important;

        transition: none !important;
    }

}
/* =========================================================
   WHY BITWISE - COLOUR TOP CARDS
========================================================= */

.bw-about-difference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


/* CARD */

.bw-difference-card {
    position: relative;
    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(6, 29, 73, 0.10);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


/* =========================================================
   COLOUR AREA
========================================================= */

.bw-difference-image {
    position: relative;

    height: 193px;

    overflow: hidden;

    isolation: isolate;
}


/* BLUE */

.bw-difference-image.blue-gradient {

    background:
        linear-gradient(
            135deg,
            #075fc7 0%,
            #0753a9 45%,
            #06336f 100%
        );
}


/* MAROON */

.bw-difference-image.red-gradient {

    background:
        linear-gradient(
            135deg,
            #c9575e 0%,
            #9f243f 45%,
            #650820 100%
        );
}


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

.bw-difference-image::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -160px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.25),
            transparent 68%
        );

    filter: blur(4px);

    animation:
        bwDifferenceGlow 7s ease-in-out infinite;

    z-index: 0;
}


@keyframes bwDifferenceGlow {

    0% {
        transform: translate(0,0);
        opacity: .4;
    }

    50% {
        transform: translate(-35px,70px);
        opacity: .9;
    }

    100% {
        transform: translate(0,0);
        opacity: .4;
    }

}


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

.bw-difference-number {

    position: absolute;

    left: 25px;
    bottom: 35px;

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

    font-size: 56px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -3px;

    z-index: 3;

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


/* =========================================================
   WATERMARK
========================================================= */

.bw-difference-watermark {

    position: absolute;

    left: -10px;
    bottom: -5px;

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

    font-size: 50px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -2px;

    white-space: nowrap;

    transform: rotate(-7deg);

    pointer-events: none;

    z-index: 2;

    animation:
        bwDifferenceWatermark 6s ease-in-out infinite;
}


@keyframes bwDifferenceWatermark {

    0% {
        transform: translateX(0) rotate(-7deg);
    }

    50% {
        transform: translateX(12px) rotate(-7deg);
    }

    100% {
        transform: translateX(0) rotate(-7deg);
    }

}


/* =========================================================
   MOVING SHINE
========================================================= */

.bw-difference-shine {

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

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

    transform: skewX(-18deg);

    animation:
        bwDifferenceShine 5s ease-in-out infinite;

    z-index: 4;
}


@keyframes bwDifferenceShine {

    0% {
        left: -120%;
    }

    45% {
        left: 150%;
    }

    100% {
        left: 150%;
    }

}


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

.bw-difference-content {

    min-height: 240px;

    padding: 40px 32px 34px;

    background: #ffffff;
}


/* SMALL LABEL */

.bw-difference-content > span {

    display: block;

    margin-bottom: 23px;

    color: #d9173d;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


/* HEADING */

.bw-difference-content h3 {

    margin: 0 0 18px;

    color: #061d49;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.25;

    transition:
        transform .35s ease;
}


/* TEXT */

.bw-difference-content p {

    margin: 0;

    color: #5f7390;

    font-size: 15.5px;

    line-height: 1.75;
}


/* =========================================================
   HOVER
========================================================= */

.bw-difference-card:hover {

    transform: translateY(-9px);

    box-shadow:
        0 28px 60px rgba(6,29,73,.16);
}


.bw-difference-card:hover .bw-difference-number {

    transform: scale(1.08);

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


.bw-difference-card:hover .bw-difference-watermark {

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

    transform:
        translateX(18px)
        rotate(-7deg)
        scale(1.04);
}


.bw-difference-card:hover
.bw-difference-content h3 {

    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

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

}


@media (max-width: 700px) {

    .bw-about-difference-grid {
        grid-template-columns: 1fr;
    }

    .bw-difference-image {
        height: 175px;
    }

    .bw-difference-content {
        padding: 32px 27px;
    }

}
/* =========================================================
   WHY BITWISE - ALL 4 CARD IMAGES
========================================================= */

.bw-about-difference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.bw-difference-card {
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(6,29,73,.10);
    transition: .45s ease;
}

/* IMAGE AREA - APPLIES TO ALL 4 CARDS */

.bw-difference-image {
    position: relative;
    width: 100%;
    height: 193px;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}

/* ALL 4 IMAGES */

.bw-difference-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform .7s ease;
}

/* Blue/red premium overlay */

.bw-difference-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(6,29,73,.15),
        rgba(7,95,199,.08),
        rgba(143,11,42,.12)
    );

    pointer-events: none;
}

/* Number on all images */

.bw-difference-image > span {
    position: absolute;

    left: 25px;
    bottom: 30px;

    z-index: 3;

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

    font-size: 55px;
    font-weight: 800;
    line-height: 1;
}

/* Image zoom on hover */

.bw-difference-card:hover
.bw-difference-image img {
    transform: scale(1.08);
}

/* Card hover */

.bw-difference-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 28px 60px rgba(6,29,73,.15);
}


/* =========================================================
   CONTENT BELOW IMAGE - DON'T CHANGE
========================================================= */

.bw-difference-content {
    background: #fff;
    padding: 40px 32px 34px;
    min-height: 240px;
}

.bw-difference-content > span {
    display: block;

    margin-bottom: 22px;

    color: #d9173d;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.bw-difference-content h3 {
    margin: 0 0 18px;

    color: #061d49;

    font-size: 23px;
    font-weight: 800;
}

.bw-difference-content p {
    margin: 0;

    color: #5f7390;

    font-size: 15.5px;
    line-height: 1.75;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

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

}

@media (max-width: 700px) {

    .bw-about-difference-grid {
        grid-template-columns: 1fr;
    }

    .bw-difference-image {
        height: 180px;
    }

}
/* =========================================================
   MISSION — PREMIUM LEARNING JOURNEY
========================================================= */

.bw-mission-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-mission-journey {
    width: 500px;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MAIN ORBIT */

.bw-mission-orbit {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(7,95,199,.25);
    box-shadow:
        0 0 35px rgba(7,95,199,.08),
        inset 0 0 30px rgba(7,95,199,.04);
    animation: missionOrbit 12s linear infinite;
}

.bw-mission-orbit::before,
.bw-mission-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #159cff;
    box-shadow: 0 0 15px rgba(21,156,255,.8);
}

.bw-mission-orbit::before {
    top: 38px;
    left: 55px;
}

.bw-mission-orbit::after {
    bottom: 30px;
    right: 55px;
}

.orbit-two {
    width: 285px;
    height: 285px;
    border: 1px dashed rgba(143,11,42,.28);
    animation-direction: reverse;
    animation-duration: 16s;
}

.orbit-two::before,
.orbit-two::after {
    background: #d9173d;
    box-shadow: 0 0 15px rgba(217,23,61,.7);
}

.orbit-two::before {
    top: 25px;
    right: 45px;
}

.orbit-two::after {
    bottom: 25px;
    left: 45px;
}

@keyframes missionOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* CENTER */

.bw-mission-center {
    position: relative;
    z-index: 5;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    background:
        radial-gradient(
            circle at 35% 25%,
            #124b91 0%,
            #061d49 48%,
            #020e29 100%
        );

    border: 2px solid transparent;

    box-shadow:
        0 25px 55px rgba(6,29,73,.22),
        0 0 35px rgba(7,95,199,.16);

    overflow: hidden;
}

.bw-mission-center::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;

    background:
        linear-gradient(
            135deg,
            #8f0b2a,
            #159cff,
            #8f0b2a
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.bw-mission-center span {
    position: relative;
    z-index: 2;
    color: #ff637d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.bw-mission-center strong {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 24px;
    letter-spacing: 2px;
}

.bw-mission-center small {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.55);
    font-size: 8px;
    letter-spacing: 1.5px;
    margin-top: 9px;
}

/* STEP CARDS */

.bw-mission-step {
    position: absolute;
    z-index: 8;

    min-width: 150px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 10px;

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

    border: 1px solid rgba(6,29,73,.08);

    border-radius: 14px;

    box-shadow:
        0 15px 35px rgba(6,29,73,.12),
        0 4px 12px rgba(7,95,199,.06);

    backdrop-filter: blur(12px);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bw-mission-step:hover {
    box-shadow:
        0 20px 40px rgba(6,29,73,.18),
        0 0 25px rgba(7,95,199,.10);
}

.step-number {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: 9px;

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

    color: white;
    font-size: 10px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #075fc7,
            #159cff
        );

    box-shadow:
        0 5px 15px rgba(7,95,199,.25);
}

.step-number.red {
    background:
        linear-gradient(
            135deg,
            #8f0b2a,
            #d9173d
        );

    box-shadow:
        0 5px 15px rgba(143,11,42,.25);
}

.bw-mission-step strong {
    display: block;
    color: #061d49;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bw-mission-step small {
    display: block;
    margin-top: 3px;
    color: #71809a;
    font-size: 9px;
}

/* POSITIONS */

.step-one {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.step-two {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.step-three {
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.step-four {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

/* HOVER */

.step-one:hover,
.step-three:hover {
    transform: translateX(-50%) translateY(-5px);
}

.step-two:hover,
.step-four:hover {
    transform: translateY(-50%) translateX(-5px);
}

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

@media (max-width: 700px) {

    .bw-mission-journey {
        width: 350px;
        height: 430px;
    }

    .bw-mission-orbit {
        width: 260px;
        height: 260px;
    }

    .orbit-two {
        width: 205px;
        height: 205px;
    }

    .bw-mission-center {
        width: 145px;
        height: 145px;
    }

    .bw-mission-center strong {
        font-size: 18px;
    }

    .bw-mission-step {
        min-width: 125px;
        padding: 9px;
    }

    .bw-mission-step strong {
        font-size: 10px;
    }

    .bw-mission-step small {
        font-size: 8px;
    }

    .step-one {
        top: 0;
    }

    .step-three {
        bottom: 0;
    }

    .step-four {
        left: -8px;
    }

    .step-two {
        right: -8px;
    }
}
/* =====================================================
   FINAL CTA BUTTONS - CENTER
===================================================== */

.bw-about-final .bw-about-hero-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 30px auto 0;
}

.bw-about-final .bw-about-hero-buttons .bw-btn {
    margin: 0;
}


/* MOBILE */

@media (max-width: 600px) {

    .bw-about-final .bw-about-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .bw-about-final .bw-about-hero-buttons .bw-btn {
        width: 220px;
    }

}
/* =========================================================
   MISSION — PREMIUM LEARNING JOURNEY
========================================================= */

.bw-mission-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-mission-journey {
    width: 500px;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MAIN ORBIT */

.bw-mission-orbit {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(7,95,199,.25);
    box-shadow:
        0 0 35px rgba(7,95,199,.08),
        inset 0 0 30px rgba(7,95,199,.04);
    animation: missionOrbit 12s linear infinite;
}

.bw-mission-orbit::before,
.bw-mission-orbit::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #159cff;
    box-shadow: 0 0 15px rgba(21,156,255,.8);
}

.bw-mission-orbit::before {
    top: 38px;
    left: 55px;
}

.bw-mission-orbit::after {
    bottom: 30px;
    right: 55px;
}

.orbit-two {
    width: 285px;
    height: 285px;
    border: 1px dashed rgba(143,11,42,.28);
    animation-direction: reverse;
    animation-duration: 16s;
}

.orbit-two::before,
.orbit-two::after {
    background: #d9173d;
    box-shadow: 0 0 15px rgba(217,23,61,.7);
}

.orbit-two::before {
    top: 25px;
    right: 45px;
}

.orbit-two::after {
    bottom: 25px;
    left: 45px;
}

@keyframes missionOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* CENTER */

.bw-mission-center {
    position: relative;
    z-index: 5;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    background:
        radial-gradient(
            circle at 35% 25%,
            #124b91 0%,
            #061d49 48%,
            #020e29 100%
        );

    border: 2px solid transparent;

    box-shadow:
        0 25px 55px rgba(6,29,73,.22),
        0 0 35px rgba(7,95,199,.16);

    overflow: hidden;
}

.bw-mission-center::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;

    background:
        linear-gradient(
            135deg,
            #8f0b2a,
            #159cff,
            #8f0b2a
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.bw-mission-center span {
    position: relative;
    z-index: 2;
    color: #ff637d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.bw-mission-center strong {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 24px;
    letter-spacing: 2px;
}

.bw-mission-center small {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.55);
    font-size: 8px;
    letter-spacing: 1.5px;
    margin-top: 9px;
}

/* STEP CARDS */

.bw-mission-step {
    position: absolute;
    z-index: 8;

    min-width: 150px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 10px;

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

    border: 1px solid rgba(6,29,73,.08);

    border-radius: 14px;

    box-shadow:
        0 15px 35px rgba(6,29,73,.12),
        0 4px 12px rgba(7,95,199,.06);

    backdrop-filter: blur(12px);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bw-mission-step:hover {
    box-shadow:
        0 20px 40px rgba(6,29,73,.18),
        0 0 25px rgba(7,95,199,.10);
}

.step-number {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: 9px;

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

    color: white;
    font-size: 10px;
    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #075fc7,
            #159cff
        );

    box-shadow:
        0 5px 15px rgba(7,95,199,.25);
}

.step-number.red {
    background:
        linear-gradient(
            135deg,
            #8f0b2a,
            #d9173d
        );

    box-shadow:
        0 5px 15px rgba(143,11,42,.25);
}

.bw-mission-step strong {
    display: block;
    color: #061d49;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bw-mission-step small {
    display: block;
    margin-top: 3px;
    color: #71809a;
    font-size: 9px;
}

/* POSITIONS */

.step-one {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.step-two {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.step-three {
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.step-four {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

/* HOVER */

.step-one:hover,
.step-three:hover {
    transform: translateX(-50%) translateY(-5px);
}

.step-two:hover,
.step-four:hover {
    transform: translateY(-50%) translateX(-5px);
}

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

@media (max-width: 700px) {

    .bw-mission-journey {
        width: 350px;
        height: 430px;
    }

    .bw-mission-orbit {
        width: 260px;
        height: 260px;
    }

    .orbit-two {
        width: 205px;
        height: 205px;
    }

    .bw-mission-center {
        width: 145px;
        height: 145px;
    }

    .bw-mission-center strong {
        font-size: 18px;
    }

    .bw-mission-step {
        min-width: 125px;
        padding: 9px;
    }

    .bw-mission-step strong {
        font-size: 10px;
    }

    .bw-mission-step small {
        font-size: 8px;
    }

    .step-one {
        top: 0;
    }

    .step-three {
        bottom: 0;
    }

    .step-four {
        left: -8px;
    }

    .step-two {
        right: -8px;
    }
}
/* =====================================================
   BITWISE HIGHLIGHTS
===================================================== */

.bw-about-snapshot {
    position: relative;
    width: 100%;
    padding: 70px 20px;
    background: #ffffff;
    overflow: hidden;
}

.bw-about-snapshot::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -220px;
    right: -120px;
    border-radius: 50%;
    background: rgba(7, 95, 199, 0.06);
    filter: blur(25px);
}

.bw-about-snapshot::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    bottom: -220px;
    left: -120px;
    border-radius: 50%;
    background: rgba(143, 11, 42, 0.05);
    filter: blur(25px);
}

.bw-snapshot-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.bw-snapshot-heading {
    text-align: center;
    margin-bottom: 38px;
}

.bw-snapshot-heading span {
    display: block;
    margin-bottom: 10px;
    color: #d9173d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.bw-snapshot-heading h2 {
    margin: 0;
    color: #061d49;
    font-size: 32px;
    line-height: 1.2;
}

.bw-snapshot-heading h2 strong {
    color: #d9173d;
}

.bw-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bw-snapshot-card {
    position: relative;
    min-height: 155px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #ffffff;
    border: 1px solid rgba(6, 29, 73, 0.09);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(6, 29, 73, 0.08);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.bw-snapshot-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #075fc7, #159cff);
}

.bw-snapshot-card.red-card::before {
    background: linear-gradient(90deg, #8f0b2a, #d9173d);
}

.bw-snapshot-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 45px rgba(6, 29, 73, 0.14);
}

.bw-snapshot-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #075fc7, #159cff);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(7, 95, 199, 0.22);
}

.bw-snapshot-card.red-card .bw-snapshot-icon {
    background: linear-gradient(135deg, #8f0b2a, #d9173d);
    box-shadow: 0 7px 18px rgba(143, 11, 42, 0.22);
}

.bw-snapshot-card strong {
    display: block;
    color: #061d49;
    font-size: 15px;
    line-height: 1.3;
}

.bw-snapshot-card span {
    display: block;
    color: #71809a;
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 950px) {
    .bw-snapshot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .bw-about-snapshot {
        padding: 50px 18px;
    }

    .bw-snapshot-heading h2 {
        font-size: 26px;
    }

    .bw-snapshot-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   PREMIUM BITWISE HIGHLIGHT CARDS
===================================================== */

.bw-about-snapshot {
    position: relative;
    padding: 75px 20px;
    background: #ffffff;
    overflow: hidden;
}

.bw-snapshot-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: auto;
}

.bw-snapshot-heading {
    text-align: center;
    margin-bottom: 42px;
}

.bw-snapshot-heading span {
    color: #d9173d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.bw-snapshot-heading h2 {
    margin: 10px 0 0;
    color: #061d49;
    font-size: 34px;
}

.bw-snapshot-heading h2 strong {
    color: #d9173d;
}


/* GRID */

.bw-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* CARD */

.bw-snapshot-card {
    position: relative;
    min-height: 205px;
    padding: 28px 24px;
    border-radius: 20px;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #061d49 0%,
            #08366f 48%,
            #075fc7 100%
        );

    border: 1px solid rgba(21,156,255,0.45);

    box-shadow:
        0 18px 45px rgba(6,29,73,0.22),
        inset 0 1px 0 rgba(255,255,255,0.16);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* RED CARD */

.bw-snapshot-card.red-card {
    background:
        linear-gradient(
            145deg,
            #061d49 0%,
            #4d0a25 48%,
            #d9173d 100%
        );

    border-color: rgba(217,23,61,0.5);

    box-shadow:
        0 18px 45px rgba(143,11,42,0.24),
        inset 0 1px 0 rgba(255,255,255,0.16);
}


/* GLOW */

.bw-snapshot-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -70px;
    border-radius: 50%;

    background: rgba(21,156,255,0.28);
    filter: blur(30px);
}

.bw-snapshot-card.red-card::before {
    background: rgba(217,23,61,0.3);
}


/* SHINE */

.bw-snapshot-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -80%;
    width: 55%;
    height: 300%;

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

    transform: rotate(25deg);
    transition: left 0.7s ease;
}

.bw-snapshot-card:hover::after {
    left: 140%;
}


/* HOVER */

.bw-snapshot-card:hover {
    transform: translateY(-9px);

    box-shadow:
        0 25px 55px rgba(6,29,73,0.30),
        0 0 25px rgba(21,156,255,0.15);
}

.bw-snapshot-card.red-card:hover {
    box-shadow:
        0 25px 55px rgba(143,11,42,0.30),
        0 0 25px rgba(217,23,61,0.15);
}


/* WATERMARK NUMBER */

.bw-snapshot-card .bw-snapshot-icon {
    position: relative;
    z-index: 3;

    width: 43px;
    height: 43px;

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

    border-radius: 11px;

    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);

    color: #ffffff;
    font-size: 12px;
    font-weight: 800;

    backdrop-filter: blur(8px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.18);
}


/* LARGE WATERMARK */

/* =====================================================
   ELEGANT BITWISE WATERMARK
===================================================== */

.bw-snapshot-card::after {
    content: attr(data-watermark);

    position: absolute;
    right: -25px;
    bottom: -18px;

    font-size: 58px;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1;

    color: rgba(7, 95, 199, 0.055);

    transform: rotate(-8deg);

    pointer-events: none;
    white-space: nowrap;

    z-index: 1;
}

.bw-snapshot-card.red-card::after {
    color: rgba(143, 11, 42, 0.055);
}

/* CARD TEXT */

.bw-snapshot-card strong {
    position: relative;
    z-index: 3;

    display: block;

    margin-top: 22px;

    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.bw-snapshot-card span {
    position: relative;
    z-index: 3;

    display: block;

    margin-top: 9px;

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

    font-size: 12px;
    line-height: 1.7;
}


/* TOP LIGHT LINE */

.bw-snapshot-card {
    border-top: 2px solid #159cff;
}

.bw-snapshot-card.red-card {
    border-top-color: #d9173d;
}


/* RESPONSIVE */

@media (max-width: 950px) {

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

}

@media (max-width: 600px) {

    .bw-about-snapshot {
        padding: 55px 18px;
    }

    .bw-snapshot-heading h2 {
        font-size: 27px;
    }

    .bw-snapshot-grid {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   ELEGANT BITWISE WATERMARK - PHILOSOPHY CARDS
===================================================== */

.bw-philosophy-card {
    position: relative;
    overflow: hidden;
}

.bw-card-watermark {
    position: absolute;
    right: -10px;
    bottom: 18px;

    font-size: 58px;
    font-weight: 900;
    letter-spacing: 6px;
    line-height: 1;

    color: rgba(7, 95, 199, 0.055);

    white-space: nowrap;
    pointer-events: none;

    transform: rotate(-5deg);

    z-index: 1;
}

.bw-philosophy-card.red-card .bw-card-watermark {
    color: rgba(143, 11, 42, 0.055);
}
/* =====================================================
   BITWISE WATERMARK - ALL 4 PHILOSOPHY CARDS
===================================================== */

/* PHILOSOPHY CARD - BITWISE LOGO WATERMARK */

.bw-philosophy-card .bw-card-watermark {
    position: absolute !important;
    right: 10px !important;
    bottom: 8px !important;

    width: 120px !important;
    height: 120px !important;

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

    opacity: 0.07 !important;

    pointer-events: none !important;
    z-index: 1 !important;

    transform: none !important;
}

.bw-philosophy-card .bw-card-watermark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
}

/* RED / MAROON CARDS */

.bw-philosophy-card.red-card .bw-card-watermark {
    color: rgba(143, 11, 42, 0.10) !important;
}


/* BLUE CARDS */

.bw-philosophy-card.blue-card .bw-card-watermark {
    color: rgba(7, 95, 199, 0.10) !important;
}
/* Legacy mobile nav menu block removed in favor of unified navbar.css */

/* BITWISE LOGO WATERMARK */

.bw-watermark {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.08;
}

.bw-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bw-journey-bg-number,
.bw-card-watermark {
    display: none !important;
}
/* PHILOSOPHY CARD LOGO WATERMARK */

.bw-card-watermark {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

.bw-card-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =====================================================
   BITWISE LOGO - MISSION CENTER
   ===================================================== */

.bw-mission-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.bw-mission-center .bw-mission-logo {
    width: 145px !important;
    height: 145px !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =====================================================
   MISSION CENTER - LOGO ONLY
   ===================================================== */

.bw-mission-center {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;

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

.bw-mission-center .bw-mission-logo {
    width: 145px !important;
    height: 145px !important;

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

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

    /* Makes the white JPEG background blend into the circle */
    mix-blend-mode: multiply !important;
}
/* REMOVE NUMBERS FROM IMAGE CORNERS ONLY */

.bw-difference-image > span {
    display: none !important;
}

/* REMOVE LARGE 01 02 03 04 FROM PHILOSOPHY CARDS */

.bw-philosophy-card .bw-card-number {
    display: none !important;
}

/* BITWISE LOGO WATERMARK - CENTER */

.bw-philosophy-card .bw-card-watermark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 120px !important;
    height: 120px !important;

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

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

    opacity: 0.08 !important;

    pointer-events: none !important;
    z-index: 2 !important;
}

.bw-philosophy-card .bw-card-watermark img {
    width: 100% !important;
    height: 100% !important;

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

    border: none !important;
    box-shadow: none !important;
}
/* =====================================================
   LEARNING JOURNEY CARDS
   CENTER BITWISE LOGO WATERMARK
   ===================================================== */

.bw-journey-card {
    position: relative !important;
    overflow: hidden !important;
}

/* REMOVE LARGE BACKGROUND 01 02 03 04 */
.bw-journey-card .bw-journey-bg-number {
    display: none !important;
}

/* CENTER LOGO WATERMARK */
.bw-journey-card .bw-watermark {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 120px !important;
    height: 120px !important;

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

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

    opacity: 0.08 !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

/* LOGO IMAGE */
.bw-journey-card .bw-watermark img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    display: block !important;

    border: none !important;
    box-shadow: none !important;
}

/* KEEP CARD CONTENT ABOVE WATERMARK */
.bw-journey-card .bw-journey-top,
.bw-journey-card .bw-journey-content,
.bw-journey-card .bw-journey-line {
    position: relative !important;
    z-index: 3 !important;
}
/* REMOVE SMALL COLOURED LINES FROM JOURNEY CARDS */

.bw-journey-card .bw-journey-line {
    display: none !important;
}