/* ============================================================
   ELITE page HERO
============================================================ */

.page-hero-elite{
    position:relative;
    min-height:440px;

    display:flex;
    align-items:center;

    padding:80px 0;

    overflow:hidden;

    background:
        linear-gradient(
            115deg,
            #061a38 0%,
            #082c62 45%,
            #075b9f 100%
        );

    border-radius:0 0 42px 42px;
}


/* GRID PATTERN */

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

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

    background-size:55px 55px;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 30%,
            #000 70%,
            transparent
        );

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 30%,
            #000 70%,
            transparent
        );
}


/* GLOWS */

.page-hero-glow{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


.page-hero-glow-left{
    width:550px;
    height:550px;

    left:-300px;
    top:-280px;

    background:
        radial-gradient(
            circle,
            rgba(20,174,239,.32),
            transparent 68%
        );
}


.page-hero-glow-right{
    width:600px;
    height:600px;

    right:-250px;
    bottom:-400px;

    background:
        radial-gradient(
            circle,
            rgba(30,190,240,.22),
            transparent 68%
        );
}


/* CONTENT */

.page-hero-content{
    position:relative;
    z-index:5;

    max-width:900px;
    margin:auto;

    text-align:center;
}


/* EYEBROW */

.page-hero-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    margin-bottom:22px;
}


.page-hero-eyebrow > span{
    width:45px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #47c9ff
        );
}


.page-hero-eyebrow > span:last-child{
    background:
        linear-gradient(
            90deg,
            #47c9ff,
            transparent
        );
}


.page-hero-eyebrow div{
    display:flex;
    align-items:center;

    gap:8px;

    color:#65d3ff;

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

    letter-spacing:2px;
}


.page-hero-eyebrow i{
    font-size:16px;
}


/* TITLE */

.page-hero-content h1{
    margin:0;

    color:#ffffff;

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

    line-height:1.08;
    letter-spacing:-2px;
}


.page-hero-content h1 span{
    color:#4dcaff;
}


/* DESCRIPTION */

.page-hero-description{
    max-width:700px;

    margin:22px auto 0;

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

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


/* SERVICE BAR */

.page-hero-services{
    width:max-content;
    max-width:100%;

    margin:32px auto 0;
    padding:13px 22px;

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

    gap:20px;

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

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

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 15px 40px rgba(0,0,0,.12);
}


.page-hero-service{
    display:flex;
    align-items:center;

    gap:8px;

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

    font-size:13px;
    font-weight:650;

    white-space:nowrap;
}


.page-hero-service i{
    color:#58d2ff;

    font-size:15px;
}


.page-hero-divider{
    width:1px;
    height:18px;

    background:rgba(255,255,255,.18);
}


/* BOTTOM ACCENT */

.page-hero-bottom-line{
    position:absolute;

    bottom:0;
    left:50%;

    width:340px;
    height:3px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #29bfff,
            transparent
        );
}


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

@media(max-width:991px){

    .page-hero-elite{
        min-height:400px;
        padding:70px 0;
    }

    .page-hero-content h1{
        font-size:49px;
    }

}


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

@media(max-width:767px){

    .page-hero-elite{
        min-height:auto;

        padding:70px 15px 65px;

        border-radius:0 0 28px 28px;
    }


    .page-hero-eyebrow{
        gap:8px;
        margin-bottom:18px;
    }


    .page-hero-eyebrow > span{
        width:20px;
    }


    .page-hero-eyebrow div{
        font-size:9px;
        letter-spacing:1.2px;
    }


    .page-hero-content h1{
        font-size:38px;

        line-height:1.12;
        letter-spacing:-1px;
    }


    .page-hero-description{
        margin-top:17px;

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


    .page-hero-services{
        width:100%;

        margin-top:25px;
        padding:14px;

        display:grid;
        grid-template-columns:1fr;

        gap:9px;

        border-radius:18px;
    }


    .page-hero-service{
        justify-content:center;

        font-size:12px;
    }


    .page-hero-divider{
        width:60%;
        height:1px;

        margin:auto;
    }

}


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

@media(max-width:480px){

    .page-hero-content h1{
        font-size:33px;
    }


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

}