.elementor-188 .elementor-element.elementor-element-72c6ba3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-30f7b05 *//* =========================================================
   MIGLOX ABOUT PAGE
========================================================= */

.miglox-about-page {

    --black: #080a0b;
    --dark: #101315;
    --graphite: #191d20;

    --silver: #b9bdc2;
    --light: #e8e9ea;

    --muted: #747a80;

    --warm: #c4b79f;

    --blue: #526a70;

    color: #171a1c;

    overflow: hidden;

    font-family:
        "Inter",
        "Helvetica Neue",
        Arial,
        sans-serif;

}


.miglox-about-page * {

    box-sizing: border-box;

}


.miglox-about-page a {

    text-decoration: none;

}


.about-container {

    width:
        min(1440px, 92%);

    margin:
        auto;

}


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

.about-section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        #777d82;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        2.8px;

}


.about-section-label span {

    color:
        #9ca1a5;

    font-size:
        8px;

}


.about-section-label.light {

    color:
        #8c9297;

}


.about-section-label.light span {

    color:
        #c2c5c8;

}


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

.about-hero {

    position:
        relative;

    min-height:
        850px;

    padding:
        210px 0 120px;

    display:
        flex;

    align-items:
        flex-end;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #090b0c;

}


.about-hero-image {

    position:
        absolute;

    inset:
        0;

    background-image:
        url("https://miglox.com/wp-content/uploads/2026/06/ChatGPT-Image-Jun-3-2026-08_06_38-PM.png");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .42;

    filter:
        saturate(.65)
        contrast(1.08);

    transform:
        scale(1.03);

}


.about-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(5,7,8,.96) 0%,
            rgba(5,7,8,.75) 45%,
            rgba(5,7,8,.30) 100%
        ),

        linear-gradient(
            0deg,
            rgba(5,7,8,.94),
            transparent 60%
        );

}


.about-hero-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .055;

    background-image:

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

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

    background-size:
        100px 100px;

}


.about-hero-label {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        42px;

    color:
        #a1a6ab;

    font-size:
        9px;

    letter-spacing:
        3px;

}


.about-hero-label span {

    width:
        42px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #d4d6d8,
            transparent
        );

}


.about-hero-content {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        1.2fr .55fr;

    gap:
        100px;

    align-items:
        end;

}


.about-hero h1 {

    margin:
        0;

    font-size:
        clamp(65px, 8vw, 115px);

    line-height:
        .88;

    letter-spacing:
        -7px;

    font-weight:
        300;

}


.about-hero h1 span {

    background:

        linear-gradient(
            110deg,
            #777d82,
            #e2e3e5 35%,
            #a1a6ab 60%,
            #e0e1e3
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    font-weight:
        500;

}


.about-hero-side {

    padding-bottom:
        10px;

}


.about-hero-side p {

    max-width:
        370px;

    margin:
        0;

    color:
        #a1a6ab;

    font-size:
        13px;

    line-height:
        1.9;

}


.about-hero-scroll {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        38px;

    color:
        #6f757a;

    font-size:
        8px;

    letter-spacing:
        2px;

}


.about-hero-scroll span {

    width:
        34px;

    height:
        1px;

    background:
        #70767b;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.about-introduction {

    padding:
        135px 0;

    background:

        linear-gradient(
            135deg,
            #f3f0ea,
            #e7e9e8 50%,
            #f4f1eb
        );

}


.about-intro-grid {

    display:
        grid;

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

    gap:
        120px;

    margin-top:
        65px;

}


.about-intro-heading h2 {

    max-width:
        700px;

    margin:
        0;

    font-size:
        clamp(48px, 6vw, 82px);

    line-height:
        .96;

    letter-spacing:
        -5px;

    font-weight:
        300;

    color:
        #1c2023;

}


.about-intro-heading h2 span {

    display:
        block;

    color:
        #737a7f;

    font-weight:
        400;

}


.about-intro-copy {

    padding-top:
        8px;

}


.about-intro-copy p {

    margin:
        0 0 22px;

    color:
        #70767a;

    font-size:
        12px;

    line-height:
        1.9;

}


.about-intro-copy .large-copy {

    color:
        #303539;

    font-size:
        18px;

    line-height:
        1.65;

}


.about-outline-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        20px;

    padding:
        0 8px 0 20px;

    min-height:
        50px;

    color:
        #202427;

    border:
        1px solid
        rgba(32,36,39,.25);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

    transition:
        .3s ease;

}


.about-outline-button span {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #d7d3c9;

    font-size:
        15px;

}


.about-outline-button:hover {

    background:
        #ffffff;

    transform:
        translateY(-3px);

}


/* =========================================================
   VISION
========================================================= */

.about-vision {

    position:
        relative;

    min-height:
        760px;

    padding:
        120px 0;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #101416;

}


.vision-image {

    position:
        absolute;

    inset:
        0;

    background-image:
        url("https://miglox.com/wp-content/uploads/2026/06/6.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .38;

    filter:
        grayscale(.4)
        saturate(.7);

}


.vision-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            #0b0d0f,
            rgba(11,13,15,.78),
            rgba(11,13,15,.42)
        );

}


.vision-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

}


.vision-content h2 {

    margin:
        45px 0 30px;

    font-size:
        clamp(52px, 7vw, 95px);

    line-height:
        .92;

    letter-spacing:
        -6px;

    font-weight:
        300;

}


.vision-content h2 em {

    color:
        #c1b7a4;

    font-style:
        normal;

    font-weight:
        400;

}


.vision-content > p {

    max-width:
        560px;

    color:
        #92989d;

    font-size:
        13px;

    line-height:
        1.9;

}


.vision-line {

    width:
        100px;

    height:
        1px;

    margin-top:
        42px;

    background:
        linear-gradient(
            90deg,
            #c5bca9,
            transparent
        );

}


.vision-signature {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        28px;

}


.vision-signature strong {

    color:
        #d8dadd;

    font-size:
        14px;

    letter-spacing:
        2px;

}


.vision-signature span {

    color:
        #6e7479;

    font-size:
        8px;

    letter-spacing:
        2px;

}


/* =========================================================
   PRINCIPLES
========================================================= */

.about-principles {

    padding:
        135px 0;

    background:
        #e8e9e7;

}


.principles-header {

    display:
        grid;

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

    gap:
        100px;

    align-items:
        end;

    margin-top:
        55px;

}


.principles-header h2 {

    margin:
        0;

    font-size:
        clamp(48px, 6vw, 78px);

    line-height:
        .95;

    letter-spacing:
        -5px;

    font-weight:
        300;

}


.principles-header h2 span {

    color:
        #71777c;

}


.principles-header p {

    margin:
        0;

    color:
        #777d82;

    font-size:
        12px;

    line-height:
        1.85;

}


.principles-grid {

    display:
        grid;

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

    margin-top:
        80px;

    border-top:
        1px solid rgba(20,24,27,.16);

    border-bottom:
        1px solid rgba(20,24,27,.12);

}


.principle-card {

    min-height:
        330px;

    padding:
        30px;

    border-right:
        1px solid rgba(20,24,27,.12);

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

}


.principle-card:first-child {

    padding-left:
        0;

}


.principle-card:last-child {

    border-right:
        0;

}


.principle-card:hover {

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

}


.principle-number {

    color:
        #969b9f;

    font-size:
        8px;

    letter-spacing:
        1.5px;

}


.principle-symbol {

    width:
        45px;

    height:
        45px;

    margin-top:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #555c61;

    border:
        1px solid rgba(30,34,37,.22);

    font-size:
        17px;

    transition:
        .3s ease;

}


.principle-card:hover
.principle-symbol {

    color:
        #ffffff;

    background:
        #252a2e;

    transform:
        rotate(45deg);

}


.principle-card h3 {

    margin:
        25px 0 13px;

    font-size:
        19px;

    line-height:
        1.2;

    font-weight:
        300;

    color:
        #31363a;

}


.principle-card h3 strong {

    display:
        block;

    font-weight:
        500;

}


.principle-card p {

    max-width:
        220px;

    margin:
        0;

    color:
        #7a8084;

    font-size:
        10px;

    line-height:
        1.8;

}


/* =========================================================
   ECOSYSTEM
========================================================= */

.about-ecosystem {

    padding:
        135px 0;

    background:

        linear-gradient(
            135deg,
            #f6f3ed,
            #e5e8e7
        );

}


.ecosystem-heading {

    margin-top:
        55px;

}


.ecosystem-heading h2 {

    margin:
        0;

    font-size:
        clamp(50px, 6vw, 84px);

    line-height:
        .93;

    letter-spacing:
        -5px;

    font-weight:
        300;

}


.ecosystem-heading h2 span {

    color:
        #747a7e;

}


.ecosystem-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    margin-top:
        75px;

}


.ecosystem-feature {

    position:
        relative;

    min-height:
        550px;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #15191b;

}


.ecosystem-feature-image {

    position:
        absolute;

    inset:
        0;

    background-image:
        url("https://miglox.com/wp-content/uploads/2026/06/2.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .58;

    transition:
        transform .8s ease;

}


.ecosystem-feature:hover
.ecosystem-feature-image {

    transform:
        scale(1.05);

}


.ecosystem-feature::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            0deg,
            rgba(7,9,10,.94),
            rgba(7,9,10,.10)
        );

}


.ecosystem-feature-content {

    position:
        absolute;

    z-index:
        2;

    left:
        42px;

    right:
        42px;

    bottom:
        42px;

}


.ecosystem-feature-content > span {

    color:
        #c2b8a5;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        2px;

}


.ecosystem-feature-content h3 {

    margin:
        15px 0;

    font-size:
        42px;

    line-height:
        .98;

    letter-spacing:
        -2px;

    font-weight:
        300;

}


.ecosystem-feature-content p {

    max-width:
        440px;

    margin:
        0;

    color:
        #a5aaae;

    font-size:
        11px;

    line-height:
        1.8;

}


/* =========================================================
   ECOSYSTEM LIST
========================================================= */

.ecosystem-list {

    display:
        flex;

    flex-direction:
        column;

    border-top:
        1px solid rgba(30,34,37,.16);

}


.ecosystem-list-item {

    flex:
        1;

    padding:
        22px 0;

    display:
        grid;

    grid-template-columns:
        45px 1fr;

    align-items:
        center;

    border-bottom:
        1px solid rgba(30,34,37,.14);

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

}


.ecosystem-list-item:hover {

    padding-left:
        12px;

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

}


.ecosystem-list-item > span {

    color:
        #969b9f;

    font-size:
        8px;

}


.ecosystem-list-item strong {

    color:
        #32373b;

    font-size:
        14px;

    font-weight:
        500;

}


.ecosystem-list-item small {

    grid-column:
        2;

    margin-top:
        5px;

    color:
        #7d8387;

    font-size:
        8px;

}


.ecosystem-view-all {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        22px 0;

    color:
        #353a3e;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


.ecosystem-view-all span {

    font-size:
        16px;

}


/* =========================================================
   FUTURE
========================================================= */

.about-future {

    position:
        relative;

    min-height:
        720px;

    padding:
        130px 0;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #0b0e10;

}


.future-bg {

    position:
        absolute;

    inset:
        0;

    background-image:
        url("https://miglox.com/wp-content/uploads/2026/06/4.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .30;

    filter:
        grayscale(.5)
        saturate(.65);

}


.future-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 70% 45%,
            rgba(84,106,112,.25),
            transparent 35%
        ),

        linear-gradient(
            90deg,
            #080a0c,
            rgba(8,10,12,.70),
            #080a0c
        );

}


.future-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .045;

    background-image:

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

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

    background-size:
        100px 100px;

}


.future-inner {

    position:
        relative;

    z-index:
        3;

    max-width:
        1000px;

}


.future-inner h2 {

    margin:
        42px 0 28px;

    font-size:
        clamp(55px, 7vw, 100px);

    line-height:
        .91;

    letter-spacing:
        -6px;

    font-weight:
        300;

}


.future-inner h2 span {

    background:

        linear-gradient(
            110deg,
            #7d878c,
            #d9dadd 35%,
            #6f7e82 60%,
            #d5d7d9
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    font-weight:
        500;

}


.future-inner > p {

    max-width:
        560px;

    color:
        #8d9499;

    font-size:
        13px;

    line-height:
        1.9;

}


.future-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        28px;

    min-height:
        52px;

    padding:
        0 8px 0 22px;

    color:
        #141719;

    background:
        linear-gradient(
            135deg,
            #dedfe2,
            #868c91
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


.future-button span {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    font-size:
        15px;

}


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

.about-final-cta {

    position:
        relative;

    padding:
        125px 0
        110px;

    text-align:
        center;

    background:

        radial-gradient(
            circle at 50% 20%,
            #ffffff,
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #e8e9e9,
            #d9dddc
        );

}


.final-cta-label {

    color:
        #777d82;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        3px;

}


.about-final-cta h2 {

    margin:
        35px auto 0;

    max-width:
        950px;

    font-size:
        clamp(55px, 8vw, 110px);

    line-height:
        .90;

    letter-spacing:
        -7px;

    font-weight:
        300;

    color:
        #171a1c;

}


.about-final-cta h2 span {

    display:
        block;

    color:
        #6c7378;

    font-weight:
        500;

}


.about-final-cta p {

    max-width:
        560px;

    margin:
        30px auto 0;

    color:
        #777d82;

    font-size:
        12px;

    line-height:
        1.8;

}


.final-cta-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        35px;

}


.final-primary {

    min-height:
        52px;

    padding:
        0 8px 0 23px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    color:
        #f4f4f5;

    background:
        #202428;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


.final-primary span {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #151719;

    background:
        linear-gradient(
            135deg,
            #dedfe2,
            #858a8f
        );

    font-size:
        15px;

}


.final-secondary {

    min-height:
        52px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    color:
        #353a3e;

    border:
        1px solid
        rgba(30,34,37,.25);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-hero-content {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .about-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .principles-header {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .principles-grid {

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

    }


    .principle-card:nth-child(2) {

        border-right:
            0;

    }


    .principle-card:nth-child(-n+2) {

        border-bottom:
            1px solid rgba(20,24,27,.12);

    }


    .ecosystem-layout {

        grid-template-columns:
            1fr;

    }

}


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

@media (max-width: 600px) {

    .about-container {

        width:
            90%;

    }


    .about-hero {

        min-height:
            760px;

        padding:
            170px 0 80px;

    }


    .about-hero h1 {

        font-size:
            clamp(48px, 13vw, 65px);

        letter-spacing:
            -4px;

    }


    .about-hero-side p {

        font-size:
            11px;

    }


    .about-introduction,
    .about-principles,
    .about-ecosystem {

        padding:
            85px 0;

    }


    .about-intro-heading h2,
    .principles-header h2,
    .ecosystem-heading h2 {

        font-size:
            clamp(43px, 11vw, 60px);

        letter-spacing:
            -3px;

    }


    .about-intro-copy .large-copy {

        font-size:
            15px;

    }


    .about-vision,
    .about-future {

        min-height:
            650px;

        padding:
            85px 0;

    }


    .vision-content h2,
    .future-inner h2 {

        font-size:
            clamp(45px, 12vw, 64px);

        letter-spacing:
            -3px;

    }


    .vision-content > p,
    .future-inner > p {

        font-size:
            11px;

    }


    .principles-grid {

        grid-template-columns:
            1fr;

        margin-top:
            55px;

    }


    .principle-card {

        min-height:
            250px;

        padding:
            28px 0;

        border-right:
            0;

        border-bottom:
            1px solid rgba(20,24,27,.12);

    }


    .principle-card:first-child {

        padding-left:
            0;

    }


    .principle-card:last-child {

        border-bottom:
            0;

    }


    .principle-card:nth-child(-n+2) {

        border-bottom:
            1px solid rgba(20,24,27,.12);

    }


    .ecosystem-layout {

        margin-top:
            55px;

    }


    .ecosystem-feature {

        min-height:
            480px;

    }


    .ecosystem-feature-content {

        left:
            25px;

        right:
            25px;

        bottom:
            25px;

    }


    .ecosystem-feature-content h3 {

        font-size:
            34px;

    }


    .ecosystem-list-item {

        min-height:
            82px;

    }


    .about-final-cta {

        padding:
            85px 0;

    }


    .about-final-cta h2 {

        font-size:
            clamp(45px, 12vw, 65px);

        letter-spacing:
            -3px;

    }


    .final-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .final-primary,
    .final-secondary {

        justify-content:
            center;

    }

}/* End custom CSS */