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

.page-hero-section {
    position:relative;
    width:100%;
    overflow:hidden;
    background:#030a14;
    aspect-ratio:1920 / 512;
}

.page-hero-section-bg {
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
}

.page-hero-section-bg img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
}

.page-hero-section-overlay {
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(3,10,20,.96) 0%,
            rgba(3,10,20,.82) 30%,
            rgba(3,10,20,.48) 65%,
            rgba(3,10,20,.30) 100%
        );
}

.page-hero-section-container {
    position:relative;
    z-index:2;
    min-height:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:12px!important;
    padding-bottom:28px!important;
}

.contact-breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:25px;
    font-size:11px;
}

.contact-breadcrumb a {
    color:#fbbb2c;
    text-decoration:none;
}

.contact-breadcrumb i {
    color:#64748b;
    font-size:9px;
}

.contact-breadcrumb span {
    color:#cbd5e1;
}

.page-hero-section-content {
    max-width:850px;
}

.contact-label {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    padding:7px 13px;
    color:#fbbb2c;
    background:rgba(251,187,44,.12);
    border:1px solid rgba(251,187,44,.28);
    border-radius:20px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.contact-label i {
    font-size:9px;
}

.page-hero-section-content h1 {
    margin:0;
    color:#fff;
    font-size:56px;
    line-height:1;
    font-weight:850;
    letter-spacing:-.035em;
}

.page-hero-section-content h1 span {
    color:#fbbb2c;
}

.page-hero-section-content h3 {
    margin:9px 0 5px;
    color:#fff;
    font-size:19px;
    font-weight:750;
}

.page-hero-section-content p {
    max-width:760px;
    margin:0;
    color:#d1d9e5;
    font-size:12px;
    line-height:1.55;
}


/* ============================================================
   LARGE DESKTOP
   Image: 1920 × 512
============================================================ */

@media(min-width:1200px) {
    .page-hero-section {
        aspect-ratio:1920 / 512;
    }

    .page-hero-section-container {
        min-height:0;
        height:100%;
    }

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

    .page-hero-section-content h3 {
        font-size:20px;
    }

    .page-hero-section-content p {
        font-size:13px;
    }
}


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

@media(min-width:768px) and (max-width:1199.98px) {
    .page-hero-section {
        aspect-ratio:1920 / 512;
    }

    .page-hero-section-container {
        min-height:0;
        height:100%;
    }

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

    .page-hero-section-content h3 {
        font-size:18px;
    }

    .page-hero-section-content p {
        font-size:12px;
    }
}


/* ============================================================
   MOBILE
   Image: 750 × 800
============================================================ */

@media(max-width:767.98px) {
    .page-hero-section {
        aspect-ratio:750 / 800;
    }

    .page-hero-section-bg img {
        object-fit:contain;
        object-position:center center;
    }

    .page-hero-section-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3,10,20,.20) 0%,
                rgba(3,10,20,.35) 35%,
                rgba(3,10,20,.88) 65%,
                rgba(3,10,20,.97) 100%
            );
    }

    .page-hero-section-container {
        min-height:0;
        height:100%;
        display:flex;
        justify-content:flex-end;
        padding-top:30px!important;
        padding-bottom:35px!important;
    }

    .contact-breadcrumb {
        margin-bottom:30px;
        font-size:10px;
    }

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

    .contact-label {
        margin-bottom:9px;
        padding:6px 11px;
        font-size:9px;
    }

    .page-hero-section-content h1 {
        font-size:42px;
        line-height:1;
    }

    .page-hero-section-content h3 {
        margin:9px 0 6px;
        font-size:17px;
    }

    .page-hero-section-content p {
        max-width:100%;
        font-size:11px;
        line-height:1.55;
    }
}


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

@media(max-width:575.98px) {
    .page-hero-section {
        aspect-ratio:750 / 800;
    }

    .page-hero-section-container {
        padding-top:25px!important;
        padding-bottom:28px!important;
    }

    .contact-breadcrumb {
        margin-bottom:25px;
        font-size:10px;
    }

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

    .page-hero-section-content h3 {
        font-size:15px;
    }

    .page-hero-section-content p {
        font-size:11px;
    }
}