/* ==========================================================
   WIZBIT LLC
   ABOUT PAGE STYLES
   Version 2.0
   ========================================================== */


/* ==========================================================
   GLOBAL
========================================================== */

.about-page {
    background: #000;
    color: #fff;
}

.about-container {
    width: min(100%,2200px);
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}


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

.about-banner {
    width: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.about-banner-image {
    display: block;
    width: min(100%,2200px);
    height: auto;
}


/* ==========================================================
   OUR STORY
========================================================== */

.wiz-story {
    position: relative;
    background: #020307;
    overflow: visible;
    color: white;
    border-bottom: 1px solid rgba(43,132,255,.35);
}

    .wiz-story::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("/images/about/about-story-sky.png") center center / cover no-repeat;
        opacity: .14;
        filter: brightness(.45);
        pointer-events: none;
    }

.wiz-story-layout {
    position: relative;
    z-index: 2;
    width: min(100%,2200px);
    margin: 0 auto;
    padding: 45px 40px 50px;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 42px;
    align-items: center;
    box-sizing: border-box;
}


/* ==========================================================
   LEFT COLUMN
========================================================== */

.wiz-story-label {
    display: block;
    margin-bottom: 18px;
    color: #66d7ff;
    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 700;
}

.wiz-story-text h2 {
    font-size: clamp(32px,2.5vw,56px);
    line-height: 1.08;
    margin-bottom: 26px;
    font-weight: 800;
}

    .wiz-story-text h2 span {
        background: linear-gradient(90deg,#f06bff,#35d0ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.wiz-story-text p {
    font-size: 17px;
    line-height: 1.75;
    color: #edf3ff;
    margin-bottom: 22px;
    max-width: 520px;
}


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

.wiz-story-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 30px;
    color: white;
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid #d26aff;
    background: linear-gradient(135deg,#4f1389,#23144d);
    transition: .25s;
    box-shadow: 0 0 18px rgba(181,86,255,.40);
}

    .wiz-story-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 28px rgba(181,86,255,.70);
    }


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

.wiz-story-art {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-70px);
}

    .wiz-story-art img {
        width: 100%;
        max-width: 680px;
        height: auto;
        display: block;
    }


/* ==========================================================
   RIGHT
========================================================== */

.wiz-story-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.wiz-story-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(7,20,52,.72);
    border: 1px solid rgba(67,168,255,.40);
    backdrop-filter: blur(6px);
}

.wiz-story-card-icon {
    width: 52px;
    font-size: 40px;
    flex-shrink: 0;
    text-align: center;
}

.wiz-story-card h3 {
    margin: 0 0 8px;
    color: #6fd4ff;
    font-size: 22px;
}

.wiz-story-card p {
    margin: 0;
    line-height: 1.65;
    color: #edf2ff;
    font-size: 15px;
}

.mission {
    border-color: #29a0ff;
}

.vision {
    border-color: #cf5fff;
}

.values {
    border-color: #2be0b0;
}

.vision .wiz-story-card-icon,
.vision h3 {
    color: #d977ff;
}

.values .wiz-story-card-icon {
    color: #4effbe;
}

/* ==========================================================
   WHY CHOOSE WIZBIT
========================================================== */

.why-wizbit {
    background: #000;
    padding: 90px 40px 100px;
}

.why-container {
    width: min(100%,2200px);
    margin: 0 auto;
}

.why-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 70px;
}

.why-line {
    flex: 1;
    max-width: 280px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #35d4ff, transparent);
}

    .why-line.gold {
        background: linear-gradient(90deg, transparent, #ffd76b, transparent);
    }

.why-title {
    text-align: center;
}

    .why-title h2 {
        margin: 0;
        color: white;
        font-size: clamp(28px,2.2vw,46px);
        letter-spacing: 3px;
        font-weight: 800;
    }

    .why-title span {
        display: block;
        margin-top: 12px;
        font-size: 22px;
        color: #ffd76b;
    }
.why-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .why-title span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-top: 10px;
        color: #ffd54a;
        font-size: 18px;
        line-height: 1;
    }

        .why-title span::before,
        .why-title span::after {
            content: "";
            display: block;
            width: 60px;
            height: 2px;
            border-radius: 999px;
        }

        .why-title span::before {
            background: linear-gradient(90deg, transparent, #00d9ff);
        }

        .why-title span::after {
            background: linear-gradient(90deg, #ffd54a, transparent);
        }

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

.why-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
}

.why-item {
    text-align: center;
    padding: 25px;
    transition: .30s ease;
}

    .why-item:hover {
        transform: translateY(-8px);
    }

    .why-item img {
        width: 110px;
        height: auto;
        margin-bottom: 24px;
        transition: .30s;
        filter: drop-shadow(0 0 18px rgba(60,190,255,.25));
    }

    .why-item:hover img {
        transform: scale(1.08);
        filter: drop-shadow(0 0 30px rgba(70,210,255,.55));
    }

    .why-item h3 {
        margin: 0 0 14px;
        font-size: 25px;
        color: #61d5ff;
        font-weight: 700;
    }

    .why-item p {
        color: #dfe8ff;
        line-height: 1.8;
        font-size: 16px;
        margin: 0 auto;
        max-width: 290px;
    }


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

@media (max-width:1500px) {

    .wiz-story-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .wiz-story-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .wiz-story-art {
        transform: none;
    }

    .wiz-story-cards {
        max-width: 900px;
        margin: auto;
    }

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

@media (max-width:900px) {

    .about-container {
        padding: 0 22px;
    }

    .wiz-story-layout {
        padding: 40px 24px;
    }

    .wiz-story-art img {
        max-width: 500px;
    }

    .why-header {
        gap: 18px;
        margin-bottom: 45px;
    }

    .why-line {
        max-width: 120px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }
}

@media (max-width:650px) {

    .about-banner-image {
        width: 100%;
    }

    .wiz-story-layout {
        padding: 30px 20px;
    }

    .wiz-story-text h2 {
        font-size: 34px;
    }

    .wiz-story-text p {
        font-size: 16px;
    }

    .wiz-story-card {
        flex-direction: column;
        text-align: center;
    }

    .wiz-story-card-icon {
        width: 100%;
    }

    .why-title h2 {
        font-size: 30px;
    }

    .why-item img {
        width: 90px;
    }
}

/* ==========================================================
   WHY CHOOSE WIZBIT
========================================================== */

.why-wizbit {
    background: #000;
    border-top: 1px solid #2076ca;
    border-bottom: 1px solid #2076ca;
    padding: 90px 0;
    color: white;
}

.why-container {
    width: min(100%, 1700px);
    margin: 0 auto;
    padding: 0 40px;
}

.why-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 70px;
}

.why-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg,#00d5ff,transparent);
}

    .why-line.gold {
        background: linear-gradient(90deg,transparent,#ffd45b);
    }

.why-title {
    text-align: center;
}

    .why-title h2 {
        margin: 0;
        font-size: clamp(34px,3vw,54px);
        font-weight: 800;
        letter-spacing: 2px;
    }

    .why-title span {
        display: block;
        margin-top: 12px;
        color: #ffd45b;
        font-size: 22px;
    }

.why-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 45px;
}

.why-item {
    text-align: center;
}

    .why-item img {
        width: 95px;
        margin-bottom: 25px;
    }

    .why-item h3 {
        color: #5fd6ff;
        margin-bottom: 15px;
        font-size: 28px;
    }

    .why-item p {
        color: #dfe8ff;
        line-height: 1.7;
        font-size: 16px;
    }

@media (max-width:1100px) {

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

@media (max-width:700px) {

    .why-container {
        padding: 0 20px;
    }

    .why-header {
        flex-direction: column;
        gap: 18px;
    }

    .why-line {
        width: 100%;
    }

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

/* ==========================================
   TICKET #14 — ALIGN ABOUT WITH NAVIGATION
========================================== */

.about-banner,
.wiz-story {
    width: calc(100% - 36px);
    max-width: none;
    margin-left: 18px;
    margin-right: 18px;
}

    .about-banner > .about-banner-image {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
    }

    .wiz-story .wiz-story-layout {
        width: 100%;
        max-width: none;
    }

@media (max-width: 600px) {
    .about-banner,
    .wiz-story {
        width: calc(100% - 12px);
        margin-left: 6px;
        margin-right: 6px;
    }
}

/* END — TICKET #14 ALIGNMENT */

/* TICKET #14 — STAR DIVIDER FIX */

.why-wizbit .why-title > span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 260px;
    max-width: 100%;
    margin: 12px auto 0;
    line-height: 1;
}

    .why-wizbit .why-title > span::before,
    .why-wizbit .why-title > span::after {
        content: "";
        position: static;
        display: block;
        flex: 1;
        width: auto;
        height: 2px;
        margin: 0;
        transform: none;
    }

    .why-wizbit .why-title > span::before {
        background: linear-gradient(90deg, transparent, #00d9ff);
    }

    .why-wizbit .why-title > span::after {
        background: linear-gradient(90deg, #ffd54a, transparent);
    }