:root {
    --pg-yellow: invert(80%) sepia(74%) saturate(1990%) hue-rotate(334deg) brightness(101%) contrast(97%);
    --pg-light-yellow: invert(93%) sepia(5%) saturate(2687%) hue-rotate(310deg) brightness(115%) contrast(102%);
    --pg-white: invert(100%) sepia(3%) saturate(7490%) hue-rotate(353deg) brightness(125%) contrast(108%);
    --pg-black: invert(0%) sepia(0%) saturate(0%) hue-rotate(117deg) brightness(108%) contrast(103%);
    --pg-yellow-color: #FFBA03;
    --pg-yellow-hover-color: #FFCA2C;
    --pg-light-yellow-color: #FFF8E4;
    --pg-white-color: #FFFFFF;
    --pg-black-color: #100F0F;
    --pg-gray-color: #616161;
    --pg-gray: invert(33%) sepia(34%) saturate(0%) hue-rotate(171deg) brightness(99%) contrast(82%);
    --pg-font: "Inter", "Noto Sans HK", sans-serif;
}

.app-promotion-description a {
    color: var(--pg-black-color);
}

* {
    font-family: var(--pg-font) !important;

    --swiper-navigation-size: 32px;
    --swiper-navigation-top-offset: 0%;
    --swiper-navigation-sides-offset: 0px;
    --swiper-navigation-color: black;
    --bs-border-radius: 0.75rem !important;
    --bs-accordion-active-color: var(--pg-white-color);
    --bs-accordion-active-bg: var(--pg-yellow-color);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.swiper-button-next, .swiper-button-prev {
    margin-top: 0 !important;
    width: 24px !important;
    height: 100% !important;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
    padding-left: 4px;
    padding-right: 4px;
}

.swiper {
    padding-left: 32px;
    padding-right: 32px;
    margin-left: -16px;
    margin-right: -16px;
}

.footer-row {
    color: var(--pg-gray-color);
    border-top: 1px rgba(171, 173, 186, 0.40) solid;
    background-color: var(--pg-white-color);
}

.btn-outline-secondary img {
    filter: var(--pg-gray);
}

.btn-outline-secondary:hover img {
    filter: var(--pg-white);
}

@media (max-width: 768px) {
    #redirect-app-section ~ footer {
        padding-bottom: 108px;
    }
}

footer {
    background-color: var(--pg-yellow-color);
}

header {
    background-color: var(--pg-white-color);
}

.app-promotion-section {
    background-color: var(--pg-yellow-color);
    margin-top: 60px;
}

.app-promotion-section .app-promotion-description {
    height: 350px;
}

.download-app-button {
    color: var(--pg-yellow-color);
}

.download-app-button img {
    margin-left: 8px;
    filter: var(--pg-yellow);
}

.btn-dark:hover img {
    filter: var(--pg-white);
}

.app-promotion-image {
    border-radius: 43px;
    max-width: 100%;
    max-height: 600px;
}

.app-promotion-image-container {
    top: -50px;
    left: 0;
    height: 400px;
    margin-bottom: -50px;
}

.app-promotion-image-front {
    height: 450px;
    right: 0;
    top: 30px;
    z-index: 2;
}

.app-promotion-image-behind {
    height: 450px;
    left: -80px;
}

#redirect-app-section {
    z-index: 9999;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0));
}

.app-logo {
    width: 45px;
    height: 45px;
    border-radius: 22.5%;
}

.app-review-container img {
    margin-bottom: 0.125rem!important;
}

.contact-info-col {
    font-size: 0.8em;
}

.user-metrics {
    margin-left: 0.125rem!important;
}

#redirect-app-section .download-app-button {
    min-width: 60px;
    color: var(--pg-white-color);
}

.btn-outline-secondary {
    border-color: #ABADBA !important;
    border-radius: 40px !important;
}

.btn-outline-secondary img {
    margin-right: 8px;
}

.privacy-text {
    color: var(--pg-white-color);
}

.copyright-text {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--pg-white-color);
}

nav {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z'/%3E%3C/svg%3E");
}

.breadcrumb-item {
    padding: 0 !important;
}

.breadcrumb-item::before {
    padding: 0 !important;
}

.breadcrumb {
    margin: 0 !important;
}

.btn-outline-warning {
    --bs-btn-color: var(--pg-yellow-color);
    --bs-btn-border-color: var(--pg-yellow-color);
    --bs-btn-hover-color: var(--pg-white-color);
    --bs-btn-hover-bg: var(--pg-yellow-color);
    --bs-btn-hover-border-color: var(--pg-yellow-color);
    --bs-btn-focus-shadow-rgb: 255,186,3;
    --bs-btn-active-color: var(--pg-white-color);
    --bs-btn-active-bg: var(--pg-yellow-color);
    --bs-btn-active-border-color: var(--pg-yellow-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--pg-yellow-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--pg-yellow-color);
    --bs-gradient: none;
}

.btn-warning {
    --bs-btn-color: var(--pg-white-color);
    --bs-btn-bg: var(--pg-yellow-color);
    --bs-btn-border-color: var(--pg-yellow-color);
    --bs-btn-hover-color: var(--pg-white-color);
    --bs-btn-hover-bg: var(--pg-yellow-hover-color);
    --bs-btn-hover-border-color: var(--pg-yellow-hover-color);
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: var(--pg-white-color);
    --bs-btn-active-bg: var(--pg-yellow-color);
    --bs-btn-active-border-color: var(--pg-yellow-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--pg-white-color);
    --bs-btn-disabled-bg: var(--pg-yellow-color);
    --bs-btn-disabled-border-color: var(--pg-yellow-color);
}

.jumbotron {
    min-height: 300px;
    aspect-ratio: 2;
    max-height: 500px;
}

.card-body {
    height: 150px;
}

.card-img-top {
    height: 150px;
}

.page-description-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--pg-gray-color);
    font-size: 0.875rem;
    width: 100%;
}

.top-image {
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.card-image {
    object-fit: cover;
    object-position: center;
}

.swiper-slide {
    max-width: calc((100% - (1.0 - 1) * 6px) / 1.0);
    margin-right: 6px;
}

@media (min-width: 240px) {
    .swiper-slide {
        max-width: calc((100% - (1.2 - 1) * 8px) / 1.2);
        margin-right: 8px;
    }
}

@media (min-width: 300px) {
    .swiper-slide {
        max-width: calc((100% - (1.4 - 1) * 8px) / 1.4);
        margin-right: 8px;
    }
}

@media (min-width: 360px) {
    .swiper-slide {
        max-width: calc((100% - (1.6 - 1) * 8px) / 1.6);
        margin-right: 8px;
    }
}

@media (min-width: 432px) {
    .swiper-slide {
        max-width: calc((100% - (1.8 - 1) * 8px) / 1.8);
        margin-right: 8px;
    }
}

@media (min-width: 576px) {
    .swiper-slide {
        max-width: calc((100% - (2.0 - 1) * 10px) / 2.0);
        margin-right: 10px;
    }
}

@media (min-width: 768px) {
    .swiper-slide {
        max-width: calc((100% - (3.0 - 1) * 12px) / 3.0);
        margin-right: 12px;
    }
}

@media (min-width: 992px) {
    .swiper-slide {
        max-width: calc((100% - (4.0 - 1) * 16px) / 4.0);
        margin-right: 16px;
    }
}

@media (min-width: 1200px) {
    .swiper-slide {
        max-width: calc((100% - (5.0 - 1) * 20px) / 5.0);
        margin-right: 20px;
    }
}