/* by Creasant */
@media (max-width: 2000px) {
    .region-breadcrumb .page-container > .block-hkust-page-title::before {
        top: 30px;
        left: 28px;
        transform: none;
        width: 150px;
    }

    .region-breadcrumb .page-container > .block-hkust-page-title::after {
        bottom: 20px;
        right: 26px;
        width: 60px;
    }

    .region-breadcrumb .page-container > .block-hkust-page-title .page-title-image {
        transform: translateX(4%);
    }

    /* Available Technologies View */
    .view-available-technologies .view-filters::before {
        width: 145%;
        height: calc(100% + 400px);
    }

    /* Featured Technologies View */
    .view-featured-technologies .view-filters::before {
        width: 145%;
        height: calc(100% + 400px);
    }

    /* Technology Adoption Program View */
    .view-technology-adoption-program .view-filters::before {
        width: 145%;
        height: calc(100% + 400px);
    }

    /* Search Background (Available Technologies + Enquiry Form) */
    .search-bg::before {
        width: 145%;
        height: calc(100% + 400px);
    }

    /* Layout Container Background */
    body:not(.path-frontpage) .layout-container::before {
        transform: translateX(-50%);
        width: 200%;
        height: calc(100% - 600px);
    }

    body:not(.path-frontpage) .layout-container::after {
        bottom: -70px;
        left: unset;
        right: 100px;
        width: 60px;
    }
}

@media (min-width: 1181px) and (max-width: 1640px) {
    header .mtpc_header .header .wrapper .logos .logos_container {
        height: auto;
        flex-direction: column;
    }

    header .mtpc_header .header .wrapper .logos .logos_right {
        width: 100%;
        padding: 20px 0 10px;
    }
}

/* ========================================
   Home Page - Desktop (max-width: 2000px)
   ======================================== */
@media (max-width: 2000px) {
    .home__hero::before {
        top: 60px;
        left: 25%;
        width: 150px;
    }

    .home__hero::after {
        top: unset;
        bottom: 0;
        left: unset;
        right: 15%;
        width: 150px;
        aspect-ratio: 200 / 80;
        background-image: url(/sites/default/files/2026-05/hero-dots.svg);
    }

    .home__carousel::before {
        width: 170%;
    }

    .home__carousel::after {
        bottom: -80px;
        left: unset;
        right: 10%;
        width: 150px;
    }
}

@media (max-width: 1400px) {
    .home__grid {
        max-width: 1000px;
    }

    .home__grid-number {
        font-size: 80px;
        line-height: 100px;
    }

    .home__grid-label {
        font-size: 18px;
        line-height: 26px;
    }
}