.detail-summary-l:root {
    --c-primary: #2e5795;
    --c-primary-800: #4b73af;
    --c-primary-600: #8db0e4;
    --c-primary-500: #c2dbff;
    --c-secondary: #ff9940;
    --c-body: #f9fafb;
    --c-black: #000000;
    --c-b-secondary: #4b5563;
    --c-info: #9597a1;
    --c-red: #d0342c;
    --c-white: #ffffff;
    --c-lvl-1: #e548ff;
    --c-lvl-2: #ffcc48;
    --c-lvl-3: #14c687;
    --c-grey: #d1d1d1;
    --c-disabled: #dee1e8;
    --c-transparent: transparent;
    --shadow-bg: 0px 6px 18px rgb(0 0 0 / 8%);
    --ts-cubic: all 0.3s cubic-bezier(0.47, 0.71, 0.66, 0.84);
}

@media (max-width: 325px) {
    .container-nav {
        gap: 1rem;
    }

    .container-nav .nav-logo a .image {
        width: 6rem;
    }

    .event-filter .search-filter {
        flex-direction: column;
    }

    .event-filter .search-sort select.form-control,
    .search-sort > select.form-control {
        width: 100%;
    }

    .detail-summary-l {
        flex-basis: 116px;
    }
}

@media (max-width: 1024px) {
    h1 {
        font-size: 2.25rem;
        font-weight: 500;
    }

    h2 {
        font-size: 1.75rem;
        font-weight: 500;
    }

    h3 {
        font-size: 1.375rem;
        font-weight: 600;
    }

    h4 {
        font-size: 1.125rem;
        font-weight: 700;
    }

    p {
        font-size: 1rem;
        font-weight: 400;
    }

    p:last-child {
        margin-bottom: 0px;
    }

    small {
        font-size: 0.75rem;
        line-height: 1.5;
        letter-spacing: 0;
    }

    ul {
        list-style: none;
        padding: 0px;
        margin-left: 12px;
    }

    a {
        color: var(--c-primary);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0;
        text-decoration: none;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-font-smoothing: antialiased;
    }

    img.icon-16 {
        width: 1rem;
        height: 1rem;
    }

    img.icon-24 {
        width: 1.125rem;
        height: 1.125rem;
    }

    img.icon-32 {
        width: 1.5rem;
        height: 1.5rem;
    }

    img.icon-48 {
        width: 2rem;
        height: 2rem;
    }

    select.form-control,
    input.form-control,
    textarea.form-control {
        font-size: 1rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .swiper-button-prev {
        left: 0.5rem;
    }

    .swiper-button-next {
        right: 0.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .search-wrapper .search-comm .form-group,
    .search-comm .form-group {
        margin-bottom: 0;
    }

    .modal-body {
        padding: 1rem;
        overflow-y: auto;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 50%;
    }

    /*====================================== SECTION WORD ======================================*/

    .c-small {
        font-size: 0.625rem;
    }

    .modal-header .close {
        opacity: 1;
        top: 0.25rem;
        right: 0.25rem;
    }

    .modal-header .close span {
        font-size: 1rem;
    }

    .nav-menu .nav-close {
        top: -8px;
        right: 16px;
        width: 3rem;
        height: 3rem;
        font-size: 14px;
    }

    .nav-menu li a {
        font-size: 1rem;
    }
}

/*Phone View*/
@media (max-width: 767px) {
    section {
        padding: 2rem 0;
    }

    /*====================================== SECTION MENU NAVBAR ======================================*/
    header nav {
        padding: 0.5rem 0.25rem;
    }

    .container-nav {
        /*flex-direction: column;*/
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 0 0.75rem;
    }

    .container-nav .nav-search {
        display: none;
    }

    .list-768-ab {
        display: none;
    }

    .nav-menu > ul {
        gap: 0.25rem;
    }

    .nav-menu ul li {
        flex-shrink: 0;
    }

    .nav-menu li .nav-icon {
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
    }

    .nav-menu li.icon-menu-m.active .nav-icon {
        transform: scale(1.05);
    }

    .nav-menu li.icon-menu-m.active::before {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 18px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--c-primary);
    }

    .menu-m-mission {
        display: block;
    }

    .menu-m-feed {
        display: none;
    }

    .icon-menu-m .btn-m-mission {
        padding: 8px 0 4px 0;
    }

    .icon-menu-m .btn-m-mission .image {
        max-width: 32px;
    }

    .nav-menu li .toggle-dropdown-notification .nav-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .notif-menu-count {
        right: -1px;
    }

    .nav-menu li.toggle-dropdown a {
        padding: 0;
    }

    .nav-profile {
        /* margin-left: 0.5rem; */
        margin-right: 0.125rem;
    }

    .nav-profile img {
        width: 2rem;
        height: 2rem;
    }

    .dropdown-menu-desktop {
        display: none;
    }

    .dropdown-menu-mob {
        padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    }

    .dropdown-menu-mob .mob-profile-menu .nav-profile img {
        width: 3rem;
        height: 3rem;
    }

    .dropdown-menu-mob .profile-menu-dropdown {
        align-items: center;
    }

    .dropdown-menu-mob .profile-menu-dropdown .icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .mob-profile-menu {
        padding: 0.25rem;
        border-radius: 0.5rem;
    }

    .navbar-collapse {
        position: absolute;
        top: 55px;
        left: 0;
        width: 100%;
    }

    .navbar-collapse ul {
        flex-direction: column;
        background-color: var(--c-white);
        border-bottom: 1px solid var(--c-primary);
        padding: 0.5rem 0;
    }

    .navbar-collapse .li-divider {
        transform: rotate(0) !important;
    }

    /*====================================== SECTION HOME PAGE ======================================*/
    section.section-home-hero {
        padding: 8rem 0 0 0;
    }

    section.section-home-hero .container {
        min-height: auto;
        padding-bottom: 2rem;
    }

    .welcome-hero {
        margin-top: 1rem;
    }

    .home-hero-image .image {
        opacity: 0.4;
        width: 4rem;
    }

    .home-hero-1 {
        top: 15%;
        left: 5%;
    }

    .home-hero-2 {
        top: 35%;
        left: -32px;
    }

    .home-hero-3 {
        top: 65%;
        left: -8px;
    }

    .home-hero-4 {
        top: 90%;
        left: 24px;
    }

    .home-hero-5 {
        top: 20%;
        right: -12px;
    }

    .home-hero-6 {
        top: 45%;
        right: -16px;
    }

    .home-hero-7 {
        top: 65%;
        right: -32px;
    }

    .home-hero-8 {
        top: 85%;
        right: 16px;
    }

    .service-indicator-wrapper {
        padding: 0 1rem;
        width: 100%;
        height: 32px;
        top: 64px;
        left: 0;
        justify-content: center;
        flex-direction: row;
        gap: 8px;
    }

    .service-indicator {
        height: 0.1875rem !important;
    }

    .section-about-services .service-card {
        justify-content: center;
        align-items: start;
        flex-direction: column-reverse;
        padding: 3.75rem 0.5rem 0 0.5rem;
        gap: 8px;
    }

    .service-card article {
        flex-basis: 0;
        padding: 0 1rem;
    }

    .service-card .service-image {
        height: auto;
        flex-basis: 0;
        max-width: 180px;
        margin: 0;
    }

    .skeleton-canvas {
        width: 375px;
        max-height: 240px;
        height: 240px;
    }

    .skeleton-image-lottie {
        height: 8rem;
        background: #e6e6e6;
        margin: 10px 0;
        position: relative;
        overflow: hidden;
    }

    section.section-home-about {
        margin-top: -124px;
        padding: 8rem 0 0 0;
    }

    .home-about-word h3 {
        font-size: 1.125rem;
    }

    .home-story-word {
        padding: 0 1rem;
    }

    .home-comm-card {
        max-width: 320px;
        padding: 1.5rem 1.5rem 5.5rem 1.5rem;
        transform: perspective(1000px) rotateX(16deg);
        margin-bottom: 24px;
    }

    .home-comm-image {
        max-width: 160px;
    }

    .home-connect-container {
        height: 100%;
        padding: 140px 16px 16px 16px;
    }

    .connect-home-left {
        left: -88px;
        top: -32px;
    }

    .connect-home-right {
        right: -88px;
        top: -32px;
    }

    .connect-home-left .image,
    .connect-home-right .image {
        max-width: 180px !important;
    }

    .home-more-image {
        margin-top: -16px;
    }

    section.section-home-more .col-12 {
        padding: 0;
    }

    .home-more {
        padding: 0 16px;
    }

    .home-feature .image {
        transform: scale(2);
    }

    .home-feature-layer {
        bottom: 24px;
        height: 72px;
    }

    /*====================================== SECTION FAQ ======================================*/
    section.section-faq .row.mt48 {
        margin-top: 8px;
    }

    .faq-hero {
        padding: 3rem 1rem 1.5rem 1rem;
    }

    .faq-image {
        position: static;
        top: 0;
        margin-left: 0 !important;
        max-width: 128px !important;
    }

    .row-faq-list {
        z-index: 3;
        position: sticky;
        top: 64px;
        background-color: white;
        flex-direction: row;
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
    }

    .row-faq-list .col-6 {
        width: auto;
    }

    .faq-category {
        display: flex;
        height: 100%;
    }

    .faq-category a {
        width: 100%;
    }

    .faq-wrapper-head a[aria-expanded="false"]:hover,
    .faq-wrapper-head a[aria-expanded="false"]:focus:hover {
        padding: 8px 0;
    }

    .faq-more {
        padding: 1rem;
    }

    .faq-more .image {
        margin-right: auto;
    }

    .faq-more .cta {
        margin: 8px auto 0 auto !important;
    }

    /*====================================== SECTION KAMUS ======================================*/
    .kamus-container {
        padding: 2.5rem 0 1.5rem 0;
    }

    .kamus-investasi-image {
        max-width: 160px !important;
    }

    .kamus-sticky {
        position: static;
        top: 0;
    }

    /*====================================== SECTION POINT PAGE ======================================*/
    .point-howto-container .point-howto-card:nth-child(even) {
        flex-direction: column-reverse !important;
    }

    .point-hero {
        padding: 1rem 1rem 1.25rem 1rem;
    }

    .point-hero .point-hero-bg .image {
        transform: scale(3.55);
    }

    .point-voucher-left,
    .point-voucher-right {
        display: none;
    }

    .point-voucher .word h1 {
        font-size: 5rem;
        line-height: 5.5rem;
    }

    .point-works-card {
        padding: 0.5rem 1rem 1.5rem 1rem;
    }

    section.section-point-howto {
        padding-top: 0;
    }

    .point-howto-card .image {
        max-width: 11.25rem !important;
        margin-left: 0 !important;
    }

    .point-trade-list {
        margin: 0.5rem 0;
    }

    .point-table-thumbnail {
        width: 100%;
        overflow-x: auto;
    }

    #pointTable {
        min-width: 320px;
    }

    td.pointTable-point {
        min-width: 54px;
    }

    .swiper-distributor .swiper-button-next,
    .swiper-distributor .swiper-button-prev {
        top: 70% !important;
    }

    .swiper-distributor .swiper-button-next {
        right: 0 !important;
    }

    .swiper-distributor .swiper-button-prev {
        left: 0 !important;
    }

    .redeem-wrapper-list .word h2 {
        font-size: 1.75rem;
    }

    .redeem-wrapper-list .word h2 span.sc-l {
        font-size: 1.25rem;
    }

    .redeem-wrapper-list span i {
        font-size: 14px !important;
    }

    .redeem-row .redeem-wrapper .cta {
        width: 100%;
    }

    .modal-header {
        padding: 1.5rem 1rem;
    }

    /*====================================== SECTION MISSION PAGE ======================================*/
    .modal-intro .modal-intro-content .image {
        max-width: 5rem !important;
    }
    .mission-hero {
        padding: 1rem;
    }

    .mission-hero .image {
        max-width: 64px !important;
    }

    .mission-list .mission-list-wrapper {
        flex-direction: column;
        align-items: start;
        gap: 4px;
    }

    .mission-list .mission-list-total {
        min-width: auto;
        text-align: left;
    }

    .mission-list {
        padding: 0.5rem 0.5rem;
    }

    /*====================================== SECTION CONTACT ======================================*/
    section.section-contact {
        margin-top: 1rem;
    }

    .contact-form {
        padding: 1rem 0;
    }

    /*====================================== SECTION LOGIN ======================================*/
    section.section-login,
    section.section-register {
        padding: 100px 0 40px 0;
    }

    /*====================================== SECTION REGISTER ======================================*/
    .login-wrapper .onboard-create-verify {
        align-items: start !important;
    }

    .login-wrapper .onboard-create-verify .icon-collapse {
        bottom: 4px;
        right: -12px;
    }

    .login-wrapper .onboard-create-verify .image {
        max-width: 64px !important;
    }

    .terms-container {
        margin: 16px auto 48px auto;
        padding: 1.5rem 1rem 1rem 1rem;
        border-radius: 0.5rem;
    }

    .terms-image {
        max-width: 3.5rem !important;
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
    }

    /*====================================== SECTION PRIVACY PASSSWORD ======================================*/

    section.section-privacy-page {
        padding-top: 3rem;
    }

    /*====================================== SECTION FORGOT PASSSWORD | SECTION DELETE PASSWORD ======================================*/
    section.section-forgot .hero-top,
    section.section-delete-account .hero-top {
        height: auto;
        padding: 1rem;
    }

    .forget-image .image,
    section.section-delete-account .hero-top .image {
        max-width: 10rem !important;
    }

    .delete-card {
        padding: 1rem;
    }

    /*====================================== SECTION ACCOUNT VALIDATION ======================================*/
    section.section-validation .hero-top {
        height: 160px;
    }

    .validation-container {
        margin-top: -7rem;
    }

    .validation-container .image {
        padding: 1.75rem;
        max-width: 160px !important;
        height: 160px;
    }

    /*====================================== SECTION WELCOME ======================================*/
    .welcome-page .image {
        max-width: 160px !important;
    }

    /*====================================== SECTION INTRODUCTION ======================================*/
    section.first-section {
        padding-top: 3.75rem;
    }

    section.onboarding-category .hero-top .image {
        max-width: 160px !important;
    }

    .introduction-level-wrapper .image {
        max-width: 128px !important;
    }

    /*====================================== SECTION INTRODUCTION QUESTION ======================================*/
    section.section-introduction .backto {
        left: 1rem;
    }

    #questionForm {
        padding: 0;
        margin: 2rem auto 10rem auto;
    }

    .step-image {
        max-width: 14rem !important;
    }

    /*====================================== SECTION ONBOARDING CHOOSE ======================================*/
    .section-onboarding-choose .hero-top .image {
        max-width: 10rem !important;
        margin-left: 0 !important;
    }

    .ob-card a {
        padding: 1rem;
    }

    .ob-card .image {
        max-width: 160px !important;
    }

    /*====================================== SECTION INTRODUCTION QUESTION ======================================*/
    .section-onboarding.onboarding-create .hero-top .image {
        max-width: 160px !important;
    }

    .choose-comm .image {
        max-width: 6rem !important;
    }

    /*====================================== SECTION ONBOARDING CREATE GROUP ======================================*/
    /*====================================== SECTION ONBOARDING CREATE FANBASE ======================================*/

    .upload-card-group {
        padding: 2rem 1rem 1.5rem 1rem;
        max-width: 480px;
    }

    .onboard-card-preview {
        position: static;
        top: 0;
        margin-top: 48px;
    }

    .onboard-card-preview .subject-head {
        margin-bottom: 16px;
    }

    .onboard-create-group .subject-title,
    .onboard-create-fanbase .subject-title {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    section.section-onboarding .backto,
    section.section-delete-account .backto {
        z-index: 9;
        top: 72px;
        left: 12px;
    }

    .upload-tips {
        margin: 16px auto 0 auto;
        text-align: center;
    }

    .upload-tips p {
        font-size: 12px;
    }

    .onboard-create-container {
        padding: 1rem 0.5rem;
    }

    .create-verify-list {
        padding-right: 32px;
    }

    .onboard-create-verify {
        padding: 1rem;
    }

    .onboard-create-verify .icon-collapse {
        bottom: 4px;
        right: 0;
    }

    /*====================================== SECTION NOTIFICATION ======================================*/
    .notif-container-page {
        padding: 0.5rem 0;
    }

    .notif-row .notif-row-time {
        padding: 0.5rem 0 1rem 0;
    }

    .notif-card a {
        padding: 0.5rem 2rem 0.5rem 0.5rem;
    }

    .notif-card.notif-card-unread a {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    .notif-card .notif-desc {
        padding-right: 1.375rem;
    }

    .notif-card .image {
        width: 3rem !important;
        height: 3rem;
    }

    .notif-card:hover .image {
        border-color: #eaeaea;
        transform: scale(1);
    }

    .notif-card .image > img {
        width: 2.75rem;
        height: 2.75rem;
    }

    .notif-card .notif-indicator {
        right: 2px;
    }

    .notif-card .notif-indicator span {
        width: 10px;
        height: 10px;
        border: 3px solid var(--c-secondary);
    }

    .notif-card .image .image-club {
        left: 15px;
        width: 16px;
        height: 16px;
    }

    .notif-card .badge-verified {
        right: -6px;
    }

    .notif-card .notif-more {
        right: 4px;
    }

    .notif-card .notif-more .btn-sc {
        width: 24px;
        height: 24px;
        font-size: 15px;
        box-shadow: 0 0 8px 4px rgb(0 0 0 / 6%);
    }

    .notif-card:hover a {
        background-color: var(--c-white);
    }

    .notif-card.notif-card-unread:hover,
    .notif-card.notif-card-unread:hover a {
        background-color: #ecf5ff;
    }

    /*====================================== SECTION SEARCH PAGE ======================================*/
    .swiper-hero-search .swiper-slide .search-hero-banner .image {
        min-height: 100px;
        max-height: 100px;
    }

    .search-wrapper .search-comm {
        flex-basis: 100%;
        width: 100%;
    }

    .search-wrapper .search-comm .form-group {
        margin-bottom: 0;
    }

    .search-container .search-sort {
        width: 100%;
    }

    .search-category {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: auto;
        padding: 1rem;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
    }

    .search-category .search-category-wrapper {
        min-width: 124px;
    }

    .search-category .search-category-wrapper .custom-choose {
        height: 100%;
    }

    .search-category-wrapper .custom-choose input[type="checkbox"] + label,
    .custom-choose input[type="checkbox"]:not(checked) + label {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .search-c-comm {
        bottom: 4rem;
        left: 0.25rem;
    }

    .mission-icon {
        display: none;
        bottom: -99rem;
        right: 0.25rem;
    }

    .search-c-comm .image,
    .search-c-comm .image:active,
    .search-c-comm .image:focus,
    .search-c-comm a:hover .image:focus,
    .mission-icon .image,
    .mission-icon .image:active,
    .mission-icon .image:focus,
    .mission-icon button:hover .image:focus {
        width: 3.25rem;
        height: 3.25rem;
    }

    .search-c-comm a:hover .image,
    .mission-icon a:hover .image {
        width: 4rem;
        height: 4rem;
    }

    /*====================================== SECTION EVENT LIST ======================================*/
    section.section-search-community .hero-search-prev,
    section.section-search-community .hero-search-next,
    section.section-event-list .hero-search-prev,
    section.section-event-list .hero-search-next,
    section.section-event-detail .banner-prev,
    section.section-event-detail .banner-next {
        opacity: 0;
    }

    .event-filter .search-filter {
        width: 100%;
        justify-content: space-between;
    }

    .event-card-container {
        flex-direction: column;
        gap: 1rem !important;
    }

    .event-card-date {
        z-index: 7;
        top: 64px;
        height: auto;
        padding: 0.5rem 1rem;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 0.5rem;
    }

    .event-card-date h4 {
        order: 2;
    }

    .event-card-date span {
        order: 3;
        margin-left: auto;
    }

    .event-card-detail,
    .event-card-desc {
        flex-direction: column;
    }

    .event-card-detail {
        gap: 0 !important;
    }

    .event-card-desc .event-card-image .image img {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        border-bottom-left-radius: 0;
    }

    .event-card-desc {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .event-card-image {
        height: 140px;
    }

    .event-card-summary {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        max-width: 100%;
    }

    .event-filter .search-sort select.form-control,
    .search-sort > select.form-control {
        width: auto;
        padding-right: 1.5rem;
    }

    /*====================================== SECTION EVENT DETAIL ======================================*/
    .event-detail-hero .swiper-container {
        padding-bottom: 1rem;
    }

    .event-detail-hero .swiper-slide .event-hero-banner .image {
        min-height: 100px;
        max-height: 100px;
    }

    .event-detail-title {
        flex-direction: column;
    }

    .event-detail-title .event-card-date {
        position: static;
        width: 100%;
        height: auto;
    }

    .event-detail-col .icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: start;
    }

    .haveto-join-group .image {
        max-width: 10rem !important;
    }

    .event-detail-cta {
        padding: 0 0.25rem;
        bottom: 68px;
    }

    .event-detail-summary {
        padding: 0.5rem 0.75rem;
        gap: 8px !important;
        border-radius: 8px;
    }

    .detail-summary-l {
        position: relative;
        flex-wrap: nowrap;
        flex-basis: 44%;
        flex-shrink: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
    }

    .row-faq-list::-webkit-scrollbar,
    .search-category::-webkit-scrollbar,
    .detail-summary-l::-webkit-scrollbar {
        display: none;
    }

    .detail-summary-l .detail-summary-wrapper {
        flex-shrink: 0;
    }

    /*====================================== SECTION EDIT PROFILE ======================================*/
    .profile-menu,
    .profile-logout {
        display: none;
    }

    .menubar-profile {
        z-index: 99;
        background: transparent
            linear-gradient(180deg, #00000000 0%, #ffffff 10%, #7494c3a8 100%)
            0% 0% no-repeat padding-box;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        display: block;
        position: fixed;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0.5rem;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

    .menubar-profile ul li {
        width: 100%;
    }

    .menubar-profile ul li a span {
        font-size: 8px;
        font-weight: 600;
    }

    .menubar-profile ul li.active a span {
        font-weight: 700;
        color: var(--c-primary) !important;
    }

    .menubar-profile ul li.active {
        transform: scale(1.1);
    }

    .profile-card-edit {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .profile-create-comm {
        order: 1;
        margin-top: 0;
        margin-bottom: 0;
    }

    .profile-card-edit .upload-card-group {
        order: 2;
    }

    .profile-widget-point {
        order: 3;
    }

    .profile-edit-container {
        margin-top: 0;
    }

    .profile-wrapper .hero-top-wrapper {
        flex-direction: column;
        gap: 4px !important;
    }

    .profile-wrapper .hero-top-wrapper .image {
        margin-left: 0 !important;
    }

    .profile-edit-container .login-wrapper .onboard-create-verify {
        padding: 0.5rem 1rem;
    }

    .profile-question .image {
        max-width: 6rem !important;
    }

    /*====================================== SECTION MY COMMUNITY ======================================*/
    .profile-comm-search {
        width: 100%;
    }

    .profile-comm-search .form-group {
        margin-bottom: 0;
    }

    /*====================================== SECTION MY EVENT ======================================*/
    .profile-edit-container .profile-comm-search ul.nav-pills {
        flex-wrap: nowrap;
    }

    .profile-edit-container li.nav-item .nav-link {
        height: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        font-size: 12px;
    }

    .profile-event-row {
        width: 100%;
    }

    .profile-event-row .event-card-date {
        width: auto;
        z-index: 7;
        top: 64px;
        height: auto;
        padding: 0.5rem 1rem;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 0.5rem;
    }

    .profile-edit-container .event-card-image {
        max-width: 100%;
    }

    .profile-event-row .event-card-date h4 {
        order: 2;
    }

    .profile-event-row .event-card-date span {
        order: 3;
        margin-left: auto;
    }

    /*====================================== SECTION SETTING ======================================*/
    .setting-logout-mob,
    .setting-logout-mob .profile-logout {
        display: block !important;
    }

    .setting-logout-mob .profile-logout a {
        padding: 0;
    }

    /*====================================== SECTION MY FEED ======================================*/
    .event-thumbnail-all .event-thumbnail-image,
    .event-thumbnail-all a {
        width: 100%;
    }

    section.section-feed {
        padding: 80px 0 80px 0;
    }

    section.section-feed .group-sidebar {
        display: none !important;
    }

    section.section-feed .group-event-container .swiper-button-prev,
    section.section-group-profile .group-event-container .swiper-button-prev {
        left: 0;
    }

    section.section-feed .group-event-container .swiper-button-next,
    section.section-group-profile .group-event-container .swiper-button-next {
        right: 0;
    }

    .post-group-from {
        padding: 0.5rem;
    }

    .post-feed-row .user-name span.label-username {
        margin-left: 0.125rem;
        position: relative;
        top: -2px;
    }

    .load-new-post {
        position: fixed;
        top: auto;
        bottom: 0;
        bottom: 8px;
        left: 50%;
        transform: translate(-50%, 200%);
        z-index: 999;
        transition: all 0.3s cubic-bezier(0.47, 0.71, 0.66, 0.84);
    }

    .load-new-post.active {
        transform: translate(-50%, 0%);
    }

    /*====================================== SECTION GROUP ======================================*/
    section.section-group-profile {
        padding: 68px 0 48px 0;
    }

    section.section-group-profile .group-sidebar .profile-card-about,
    section.section-group-profile .group-sidebar .profile-card-members,
    section.section-group-profile .group-event-container,
    section.section-group-profile
        .group-story-container
        .swiper-story
        .swiper-button-prev,
    section.section-group-profile
        .group-story-container
        .swiper-story
        .swiper-button-next,
    .feed-post-comment-self {
        display: none !important;
    }

    section.section-group-profile .profile-card-group {
        max-width: 320px;
    }

    .profile-card-edit .upload-pp-group .badge-verified img.icon-32,
    .group-pp .badge-verified img.icon-32 {
        width: 2rem;
        height: 2rem;
    }

    #modalAbout .profile-card-group .group-setting-profile .btn-sc {
        background-color: #ffffff5f;
        color: var(--c-primary) !important;
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }

    #modalAbout .profile-group-bg::before {
        background: transparent
            linear-gradient(180deg, #00000033 0%, #2e5795 50%, #2e5795 100%) 0%
            0% no-repeat padding-box;
    }

    .group-profile-summary {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .memcom-row .nav-pills {
        margin: 0 auto;
        flex-wrap: nowrap;
        position: sticky;
        top: -16px;
        z-index: 7;
        background-color: var(--c-white);
    }

    .memcom-row .nav-pills li.nav-item .nav-link {
        height: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        font-size: 12px;
    }

    .memcom-card .memcom-card-wrapper .image,
    .memcom-card .memcom-card-wrapper .image > img {
        width: 96px;
        height: 96px;
        margin: 0 auto;
    }

    .memcom-card .badge-verified {
        right: 6px !important;
    }

    .memcom-card .badge-verified img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .row-leader .memcom-card {
        margin-bottom: 1rem;
    }

    .approve-card {
        padding: 0.5rem;
    }

    .approve-card .image,
    .approve-card .image > img {
        width: 48px;
        height: 48px;
    }

    .approve-card span.badge-verified {
        right: -2px !important;
        bottom: -2px !important;
    }

    .approve-card .cta {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .approve-card .cta .btn-sc {
        font-size: 12px;
    }

    .md-profile-card .image .badge-verified img {
        width: 2rem !important;
        height: 2rem !important;
    }

    #modalEventList .event-card-date {
        top: -16px;
    }

    #modalEventList .cta-create-event {
        width: 100%;
        height: 114px;
        margin-bottom: 1rem;
    }

    #modalEventList .search-filter p {
        font-size: 12px !important;
    }

    /* .menubar-community {
		z-index: 999;
		background: transparent linear-gradient(180deg, #00000000 0%, #ffffff 10%, #7494c3a8 100%) 0% 0% no-repeat padding-box;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		display: block;
		position: fixed;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: auto;
		padding: 0.5rem 0.5rem 0 0.5rem;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	} */
    .menubar-community {
        margin: 1rem 0 0.5rem 0;
        background-color: #f1f6ff;
        padding: 0.25rem;
        border-radius: 0.5rem;
    }

    .menubar-community ul li {
        width: 100%;
    }

    .menubar-community ul li a span {
        font-size: 12px;
    }

    .menubar-community ul li.active a span {
        font-weight: 700;
        color: var(--c-primary) !important;
    }

    .menubar-community ul li.active {
        transform: scale(1.1);
    }

    .menubar-post {
        z-index: 999;
        position: fixed;
        bottom: 72px;
        right: 8px;
    }

    .menubar-post .btn-sc {
        background-color: var(--c-primary);
        border-radius: 50%;
        color: var(--c-white);
        width: 40px !important;
        height: 40px;
        padding: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .md-story-logo {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .md-story-logo .image {
        max-width: 20rem !important;
    }

    .md-story-person {
        bottom: 12px;
        padding: 0 1rem;
    }

    .story-detail-prev,
    .story-detail-next {
        display: none;
    }

    .story-person-prev {
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        width: 50% !important;
    }

    .story-person-next {
        height: 100% !important;
        top: 0 !important;
        right: 0 !important;
        width: 50% !important;
    }

    /*====================================== SECTION TIMELINE • SECTION MODAL COMMENT ======================================*/
    .feed-timeline {
        padding: 0.5rem;
    }

    .feed-comment-list .image-pp-user .badge-verified {
        right: -2px;
    }

    #modalComment .post-timeline-container {
        padding: 0;
    }

    #modalComment .feed-post-comment {
        gap: 0.5rem !important;
        margin: 0;
    }

    .comment-inside-comment .feed-comment-list {
        padding-left: 0;
    }

    #modalComment .feed-post-comment .cta .btn-sc {
        padding: 0;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .comment-reply-specific {
        margin-left: 8px;
    }

    /*====================================== SECTION FAN BASE ======================================*/
    section.section-fb-profile {
        padding: 68px 0 48px 0;
    }

    .fb-hero {
        height: auto;
        margin-bottom: 0;
    }

    .group-setting-btn {
        top: 8px;
        right: 8px;
    }

    .fb-card-cta {
        width: 100%;
    }

    section.section-fb-profile .group-sidebar,
    section.section-fb-profile .group-event-container,
    section.section-fb-profile
        .group-story-container
        .swiper-story
        .swiper-button-prev,
    section.section-fb-profile
        .group-story-container
        .swiper-story
        .swiper-button-next,
    .feed-post-comment-self {
        display: none !important;
    }

    section.section-fb-profile .profile-card-group {
        max-width: 480px;
    }

    .group-pp .badge-verified img.icon-32 {
        width: 2rem;
        height: 2rem;
    }

    .file-attachment-body > .file-attachment-content {
        max-width: 320px;
    }

    .post-embed-youtube > .post-youtube-content {
        height: 100%;
    }

    #modalCreateEvent .gallery-photo .imagePreview {
        height: 80px;
    }

    /*====================================== SECTION MODAL ======================================*/
    .modal-content {
        height: 100%;
        max-height: 97dvh;
        border-radius: 1rem;
    }

    #modalSetting .modal-header,
    #modalEventList .modal-header,
    #modalMedia .modal-header,
    #modalMoreOption .modal-header,
    #modalMember .modal-header,
    #modalComment .modal-header,
    #modalPost .modal-header,
    #modalReportUser .modal-header,
    #modalEducation .modal-header,
    #modalExperience .modal-header,
    #modalCreateStory .modal-header,
    #modalPolling .modal-header,
    #modalAttachFile .modal-header,
    #modalUploadFoto .modal-header,
    #modalDetailEvent .modal-header,
    #modalEditEvent .modal-header {
        z-index: 9;
        position: sticky;
        top: 0;
        background-color: var(--c-white);
        padding: 0.75rem 2rem;
    }

    #modalMoreOption .modal-header h3,
    #modalMember .modal-header h3,
    #modalSetting .modal-header h3,
    #modalEventList .modal-header h3,
    #modalMedia .modal-header h3,
    #modalComment .modal-header h3,
    #modalPost .modal-header h3,
    #modalReportUser .modal-header h3,
    #modalEducation .modal-header h3,
    #modalExperience .modal-header h3,
    #modalCreateStory .modal-header h3,
    #modalPolling .modal-header h3,
    #modalAttachFile .modal-header h3,
    #modalUploadFoto .modal-header h3,
    #modalDetailEvent .modal-header h3,
    #modalEditEvent .modal-header h3 {
        font-size: 1.125rem;
    }

    #modalSetting .modal-body {
        padding: 1rem 1rem;
    }

    #modalMember .memcom-container {
        padding-bottom: 2rem;
    }

    #modalAbout .modal-content {
        background-color: var(--c-transparent);
    }

    #modalStory .modal-fullscreen .modal-body {
        padding: 0;
    }

    #modalComment .modal-content {
        max-height: 100dvh;
    }

    #modalComment .modal-dialog {
        margin: 0;
    }

    #modalComment .modal-body {
        max-height: calc(100vh - 1rem);
        padding: 2rem 1rem 1rem 1rem;
    }

    #modalComment .post-timeline-container {
        height: auto;
    }

    #modalComment .modal-footer {
        padding-top: 0 !important;
        margin-top: 2rem;
    }

    /*====================================== SECTION 404 ======================================*/
    section.section-notfound {
        padding-top: 4rem;
    }

    .pagenotfound .image {
        max-width: 240px !important;
    }

    /*====================================== SECTION FOOTER ======================================*/
    footer {
        padding: 1rem 0 5rem 0;
    }

    .footer-top {
        margin-bottom: -0.125rem;
    }

    .footer-logo {
        max-width: 10rem;
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .footer-link ul {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer-top-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
    }

    .footer-wording-ojk {
        width: 90%;
        text-align: center;
    }
}

@media (min-width: 768px) {
}

@media (min-width: 461px) and (max-width: 767px) {
    .faq-wrapper-head a[aria-expanded="false"]:hover,
    .faq-wrapper-head a[aria-expanded="false"]:focus:hover {
        padding: 8px 0;
    }

    /*====================================== SECTION POINT ======================================*/
    .point-voucher .image {
        max-width: 20rem !important;
        margin-left: 0 !important;
    }

    #pointTable {
        min-width: 618px;
    }

    .redeem-wrapper-list .image {
        max-width: 84px !important;
    }

    .redeem-wrapper-list .word h2 {
        font-size: 1.25rem;
    }

    .redeem-wrapper-list .word h2 span.sc-l {
        font-size: 1rem;
    }

    .redeem-wrapper-list span i {
        font-size: 14px !important;
    }

    .swiper-distributor .swiper-button-next,
    .swiper-distributor .swiper-button-prev {
        top: 60% !important;
    }

    .swiper-distributor .swiper-button-next {
        right: 8px !important;
    }

    .swiper-distributor .swiper-button-prev {
        left: 8px !important;
    }

    /*====================================== SECTION MISSION PAGE ======================================*/
    .mission-list .mission-list-wrapper {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .mission-list .mission-list-total {
        min-width: 48px;
        text-align: center;
    }

    .mission-list {
        padding: 0.5rem 1rem;
    }
}

/* Portrait iPad */
@media (min-width: 768px) and (max-width: 992px) {
    .modal-dialog {
        max-width: 640px;
    }

    #modalStoryOwnStory .modal-dialog,
    #modalStory .modal-dialog {
        max-width: 100% !important;
    }

    .menubar-profile {
        z-index: 99;
        background: transparent
            linear-gradient(180deg, #00000000 0%, #ffffff 10%, #7494c3a8 100%)
            0% 0% no-repeat padding-box;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        display: block;
        position: fixed;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: auto;
        padding: 0.5rem;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

    .menubar-profile ul li {
        width: 100%;
    }

    .menubar-profile ul li a .icon img {
        width: 1.75rem;
        height: 1.75rem;
    }

    .menubar-profile ul li a span {
        font-size: 14px;
        font-weight: 600;
    }

    .menubar-profile ul li.active a span {
        font-weight: 700;
        color: var(--c-primary) !important;
    }

    .menubar-profile ul li.active {
        transform: scale(1.1);
    }

    /*====================================== SECTION NAVBAR ======================================*/
    .nav-menu.active .nav-header h2 {
        font-size: 2.25rem;
    }

    .container-nav {
        gap: 1.5rem;
    }

    .container-nav .nav-logo a .image {
        width: 6rem;
    }

    .nav-menu ul {
        gap: 0.25rem;
    }

    .nav-menu ul li {
        flex-shrink: 0;
    }

    .nav-menu li a {
        font-size: 0.75rem;
    }

    .nav-menu li .li-divider {
        width: 18px;
    }

    .menu-m-feed,
    .menu-i-hid {
        display: none;
    }

    .icon-menu-m .btn-m-mission {
        padding: 4px 8px 0 8px;
    }

    .icon-menu-m .btn-m-mission .image {
        max-width: 24px;
    }

    .nav-menu .nav-close {
        top: 0;
        right: 16px;
        width: 4rem;
        height: 4rem;
        font-size: 16px;
    }

    .nav-profile {
        width: 1.5rem;
        height: 1.5rem;
    }

    .menu-m-mission {
        display: block;
    }

    .mission-icon {
        display: none;
    }

    /*====================================== SECTION HOME PAGE ======================================*/
    section.section-home-hero {
        padding: 0 0 0 0;
    }

    .home-hero-image .image {
        width: 8rem;
    }

    section.section-home-hero .container {
        min-height: 100vh;
    }

    .welcome-hero {
        margin-top: 1rem;
    }

    .home-hero-1 {
        top: 15%;
        left: 5%;
    }

    .home-hero-2 {
        top: 35%;
        left: -32px;
    }

    .home-hero-3 {
        top: 65%;
        left: -8px;
    }

    .home-hero-4 {
        top: 90%;
        left: 24px;
    }

    .home-hero-5 {
        top: 20%;
        right: -12px;
    }

    .home-hero-6 {
        top: 40%;
        right: -16px;
    }

    .home-hero-7 {
        top: 65%;
        right: -32px;
    }

    .home-hero-8 {
        top: 85%;
        right: 16px;
    }

    .service-indicator-wrapper {
        top: 240px;
        left: 1rem;
        justify-content: start;
    }

    .section-about-services .service-card {
        flex-direction: column-reverse;
        justify-content: center;
        padding: 5.5rem 0.5rem 0 0.5rem;
    }

    .service-card article {
        flex-basis: 50%;
        padding: 0 1rem;
        max-width: 640px;
        margin: 0 auto;
    }

    .service-card .service-image {
        flex-basis: 45%;
        max-width: 360px;
        width: 100%;
        margin: 0 auto 16px auto;
    }

    .home-about-image .image {
        max-width: 480px;
        margin: 24px auto -80px auto;
    }

    section.section-home-about {
        margin-top: -160px;
        padding: 12rem 0 0 0;
    }

    .home-story-word {
        padding: 0 1rem;
    }

    .home-comm-card {
        max-width: 320px;
        padding: 2rem 1.5rem 5rem 1.5rem;
        transform: perspective(1000px) rotateX(12deg);
    }

    .home-comm-image {
        max-width: 140px;
        bottom: -0.75rem;
        right: -0.5rem;
    }

    .col-home-comm:nth-child(2) .home-comm-card .home-comm-image {
        bottom: -1rem;
        right: -1.75rem;
    }

    .home-connect-container {
        height: 100%;
        padding: 80px 160px;
    }

    .connect-home-left {
        left: -172px;
    }

    .connect-home-right {
        right: -172px;
    }

    .connect-home-left .image,
    .connect-home-right .image {
        max-width: 320px !important;
    }

    .home-more-image {
        margin-top: -64px;
    }

    .home-feature .image {
        transform: scale(1.5);
    }

    .home-feature-layer {
        bottom: -16px;
        height: 128px;
    }

    .skeleton-canvas {
        width: 860px;
        max-height: 550px;
        height: 550px;
    }

    /*====================================== SECTION FAQ ======================================*/

    .faq-hero {
        padding: 2.5rem 1rem 1.5rem 1rem;
    }

    .faq-image {
        max-width: 15rem !important;
    }

    .faq-sticky {
        top: 25rem;
    }

    .row-faq-list {
        flex-direction: row;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow: auto;
        padding-bottom: 1rem;
    }

    .faq-category {
        display: flex;
        height: 100%;
    }

    .faq-category a {
        width: 100%;
    }

    .faq-wrapper-head a[aria-expanded="false"]:hover,
    .faq-wrapper-head a[aria-expanded="false"]:focus:hover {
        padding: 8px 0;
    }

    .row-faq-list::-webkit-scrollbar {
        display: none;
    }

    /*====================================== SECTION LOGIN ======================================*/
    section.section-login {
        min-height: 85vh;
    }

    /*====================================== SECTION REGISTER ======================================*/
    .login-wrapper .onboard-create-verify .image {
        max-width: 72px;
    }

    .terms-container {
        margin: 16px auto 48px auto;
        padding: 1.5rem 1rem 1rem 1rem;
        border-radius: 0.5rem;
    }

    .terms-image {
        max-width: 4rem !important;
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
    }

    /*====================================== SECTION FORGOT PASSSWORD ======================================*/
    section.section-validation .hero-top,
    section.section-forgot .hero-top {
        height: 30vh;
        padding: 1rem;
    }

    /*====================================== SECTION INTRODUCTION QUESTION ======================================*/
    section.section-introduction .backto {
        left: 2rem;
    }

    #questionForm {
        padding: 0;
        margin: 2rem auto 10rem auto;
    }

    .step-image {
        max-width: 20rem !important;
    }

    /*====================================== SECTION ONBOARDING CREATE GROUP ======================================*/
    /*====================================== SECTION ONBOARDING CREATE FANBASE ======================================*/
    .onboard-card-preview {
        position: static;
        top: 0;
        margin-top: 48px;
    }

    .onboard-card-preview .subject-head {
        text-align: center;
        margin-bottom: 16px;
    }

    .onboard-create-group .subject-title,
    .onboard-create-fanbase .subject-title {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    section.section-onboarding .backto {
        z-index: 9;
        top: 90px;
        left: 32px;
    }

    .upload-tips {
        margin: 16px auto 0 auto;
        text-align: center;
    }

    .upload-tips p {
        font-size: 12px;
    }

    /*====================================== SECTION SEARCH ======================================*/
    .swiper-hero-search .swiper-slide .search-hero-banner .image {
        min-height: 180px;
        max-height: 180px;
    }

    .search-wrapper .search-comm .form-group,
    .search-comm .form-group {
        margin-bottom: 0;
    }

    .search-sort {
        margin-top: 4px;
    }

    .search-c-comm {
        bottom: 4.25rem;
        left: 1rem;
    }

    .mission-icon {
        bottom: 3.75rem;
        right: 0.25rem;
    }

    /*====================================== SECTION EVENT LIST ======================================*/
    .event-card-detail {
        flex-direction: column;
    }

    .event-card-image {
        height: 204px;
    }

    .event-card-summary {
        max-width: 100%;
    }

    /*====================================== SECTION EVENT DETAIL ======================================*/
    .event-detail-hero .swiper-slide .event-hero-banner .image {
        min-height: 180px;
        max-height: 180px;
    }

    .event-detail-title .event-card-date {
        position: static;
        width: auto;
        height: auto;
    }

    .event-detail-cta {
        bottom: 68px;
        padding: 0 0.5rem;
    }

    .event-detail-summary {
        border-radius: 8px;
    }

    .profile-wrapper .hero-top-wrapper {
        flex-direction: column;
        gap: 4px !important;
    }

    .profile-wrapper .hero-top-wrapper .image {
        margin-left: 0 !important;
    }

    .profile-edit-container .login-wrapper .onboard-create-verify {
        padding: 0.8rem 1rem;
    }

    .profile-edit-container
        .login-wrapper
        .onboard-create-verify
        .icon-collapse {
        right: -20px;
    }

    .profile-question .image {
        max-width: 128px !important;
    }

    /*====================================== SECTION EDIT PROFILE ======================================*/
    .profile-card-edit .upload-pp-group .badge-verified img.icon-32 {
        width: 2rem;
        height: 2rem;
    }

    /*====================================== SECTION MY COMMUNITY ======================================*/
    .profile-comm-search {
        width: 100%;
    }

    .profile-comm-search .form-group {
        margin-bottom: 0;
    }

    .setting-wrapper .post-feed-row .user-uname {
        max-width: 180px;
        width: 100%;
    }

    /*====================================== SECTION MY EVENT ======================================*/
    .profile-edit-container li.nav-item .nav-link {
        font-size: 14px;
    }

    .profile-event-row {
        width: 100%;
    }

    .profile-event-row .event-card-date {
        width: auto;
        z-index: 7;
        top: 64px;
        height: auto;
        padding: 0.5rem 1rem;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 0.5rem;
    }

    .profile-event-row .event-card-date h4 {
        order: 2;
    }

    .profile-event-row .event-card-date span {
        order: 3;
        margin-left: auto;
    }

    .profile-event-row .event-card-detail,
    .profile-event-row .event-card-desc {
        flex-direction: column;
    }

    .profile-event-row .event-card-detail {
        gap: 0 !important;
    }

    .profile-event-row .event-card-desc .event-card-image .image img {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        border-bottom-left-radius: 0;
    }

    .profile-event-row .event-card-desc {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .profile-event-row .event-card-image {
        max-width: 100%;
        height: 140px;
    }

    .profile-event-row .event-card-summary {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        max-width: 100%;
    }

    /*====================================== SECTION MY FEED ======================================*/
    .event-thumbnail-all .event-thumbnail-image,
    .event-thumbnail-all a {
        width: 100%;
    }

    /*====================================== SECTION GROUP ======================================*/
    section.section-group-profile {
        padding: 80px 0 48px 0;
    }

    section.section-group-profile .group-sidebar .profile-card-about,
    section.section-group-profile .group-sidebar .profile-card-members,
    section.section-group-profile .group-event-container,
    section.section-group-profile .swiper-story .swiper-button-prev,
    section.section-group-profile .swiper-story .swiper-button-next,
    .feed-post-comment-self {
        display: none !important;
    }

    section.section-group-profile .profile-card-group {
        max-width: 480px;
    }

    .group-pp .badge-verified img.icon-32 {
        width: 2rem;
        height: 2rem;
    }

    #modalAbout .profile-card-group .group-setting-profile .btn-sc {
        background-color: #ffffff5f;
        color: var(--c-primary) !important;
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }

    #modalAbout .profile-group-bg::before {
        background: transparent
            linear-gradient(180deg, #00000033 0%, #2e5795 50%, #2e5795 100%) 0%
            0% no-repeat padding-box;
    }

    .group-profile-summary {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .memcom-row .nav-pills {
        flex-wrap: nowrap;
    }

    .memcom-row .nav-pills li.nav-item .nav-link {
        height: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        font-size: 12px;
    }

    .memcom-card .memcom-card-wrapper .image,
    .memcom-card .memcom-card-wrapper .image > img {
        width: 96px;
        height: 96px;
        margin: 0 auto;
    }

    .memcom-card .badge-verified {
        right: 6px !important;
    }

    .memcom-card .badge-verified img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .row-leader .memcom-card {
        margin-bottom: 1rem;
    }

    .approve-card {
        padding: 0.5rem;
    }

    .approve-card .image,
    .approve-card .image > img {
        width: 48px;
        height: 48px;
    }

    .approve-card span.badge-verified {
        right: -2px !important;
        bottom: -2px !important;
    }

    .approve-card .cta {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    .approve-card .cta .btn-sc {
        font-size: 12px;
    }

    .md-profile-card .image .badge-verified img {
        width: 2rem !important;
        height: 2rem !important;
    }

    #modalEventList .modal-header {
        z-index: 9;
        position: sticky;
        top: 0;
        background-color: var(--c-white);
    }

    #modalEventList .modal-dialog {
        max-width: 720px;
    }

    #modalEventList .event-card-date {
        top: 78px;
    }

    #modalEventList .cta-create-event {
        width: 100%;
        height: 114px;
        margin-bottom: 1rem;
    }

    .menubar-community {
        margin: 1rem 0 0.5rem 0;
        background-color: #f1f6ff;
        padding: 0.25rem;
        border-radius: 0.5rem;
    }

    .menubar-community ul li {
        width: 100%;
    }

    .menubar-community ul li a .icon i,
    .menubar-community ul li a span {
        font-size: 15px;
    }

    .menubar-community ul li.active a span {
        font-weight: 700;
        color: var(--c-primary) !important;
    }

    .menubar-community ul li.active {
        transform: scale(1.1);
    }

    .menubar-post {
        z-index: 999;
        position: fixed;
        bottom: 80px;
        right: 24px;
    }

    .menubar-post .btn-sc {
        background-color: var(--c-primary);
        border-radius: 50%;
        color: var(--c-white);
        width: 48px !important;
        height: 48px;
        font-size: 18px;
        padding: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #modalStory .modal-fullscreen .modal-body {
        padding: 0;
    }

    .story-person-prev {
        height: 100% !important;
        background-color: var(--c-transparent);
        top: 0;
        border-radius: 0%;
        left: 0;
        width: 50% !important;
        box-shadow: none;
        margin-top: 0 !important;
    }

    .story-person-next {
        height: 100% !important;
        background-color: var(--c-transparent);
        top: 0;
        border-radius: 0%;
        right: 0;
        width: 50% !important;
        box-shadow: none;
        margin-top: 0 !important;
    }

    #modalStory .modal-dialog {
        max-width: 100%;
    }

    #modalStory .swiper-story-detail {
        padding: 72px 0 16px 0;
    }

    .story-detail-next,
    .story-detail-prev {
        display: none;
    }

    /*====================================== SECTION FAN BASE ======================================*/
    .fb-hero {
        height: auto;
        margin-bottom: 0;
    }

    .group-setting-btn {
        top: 8px;
        right: 8px;
    }

    .fb-card-cta {
        width: 100%;
    }

    section.section-fb-profile .group-sidebar,
    section.section-fb-profile .group-event-container,
    section.section-fb-profile
        .group-story-container
        .swiper-story
        .swiper-button-prev,
    section.section-fb-profile
        .group-story-container
        .swiper-story
        .swiper-button-next,
    .feed-post-comment-self {
        display: none !important;
    }

    section.section-fb-profile .profile-card-group {
        max-width: 480px;
    }

    /*====================================== SECTION POINT - iPad Portrait ======================================*/
    .point-hero {
        padding: 1.5rem 1rem;
    }

    .point-hero .point-hero-bg .image {
        transform: scale(1.8);
    }

    section.section-point-voucher {
        padding-bottom: 0;
    }

    .point-voucher-left,
    .point-voucher-right {
        display: none;
    }

    .point-voucher .image {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .point-voucher .word h2 {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .point-voucher .word h1 {
        font-size: 4rem;
        line-height: 4.5rem;
    }

    .point-voucher .word span.sc-l {
        font-size: 1rem;
    }

    .point-works-card {
        padding: 0.5rem 1rem 1.5rem 1rem;
    }

    section.section-point-howto {
        padding-top: 0;
    }

    .point-trade-list {
        margin-top: 1rem;
    }

    #mobileTradeText {
        min-height: 48px;
    }

    .pointTable-point {
        min-width: 100px;
    }

    .point-howto-card .image {
        max-width: 15rem !important;
        margin-left: 0 !important;
    }

    section.section-point-history {
        padding-top: 0;
    }

    .modal-header {
        padding: 1.5rem 1rem;
    }

    /*====================================== SECTION MISSION ======================================*/

    /*====================================== SECTION FOOTER ======================================*/
    footer {
        padding: 2rem 0 1rem 0;
    }

    .footer-top {
        margin-bottom: -0.125rem;
    }

    .footer-logo {
        max-width: 12rem;
    }

    .footer-top-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
    }

    .footer-wording-ojk {
        width: 98%;
        text-align: center;
    }
}

/* Landscape iPad Air and another Tab */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /*====================================== SECTION NAVBAR ======================================*/
    .nav-menu .nav-close {
        top: 0;
    }

    .nav-menu .nav-footer {
        bottom: 86px;
    }

    /*====================================== SECTION HOME PAGE ======================================*/
    section.section-home-hero {
        /* padding: 0 0 0 0; */
    }

    .home-hero-image .image {
        width: 7rem;
    }

    section.section-home-hero .container {
        justify-content: start !important;
        min-height: 100vh;
    }

    .home-hero-1 {
        top: 25%;
        left: 10%;
    }

    .home-hero-2 {
        top: 45%;
        left: 0%;
    }

    .home-hero-3 {
        top: 65%;
        left: 12%;
    }

    .home-hero-4 {
        top: 95%;
        left: 3%;
    }

    .home-hero-5 {
        top: 30%;
        right: 8%;
    }

    .home-hero-6 {
        top: 48%;
        right: 1%;
    }

    .home-hero-7 {
        top: 65%;
        right: 6%;
    }

    .home-hero-8 {
        top: 92%;
        right: 4%;
    }

    .section-about-services .service-card {
        padding: 0 4rem 0 8rem;
    }

    .service-card article {
        flex-basis: 50%;
    }

    .service-card .service-image {
        flex-basis: 50%;
    }

    section.section-home-about {
        padding: 12rem 0 3rem 0;
    }

    .home-about-image {
        width: 480px !important;
        margin: 0 auto;
        transform: translateY(128px);
    }

    .home-comm-card {
        max-width: 360px;
        padding: 2rem 1.5rem 6rem 1.5rem;
        transform: perspective(1000px) rotateX(16deg);
    }

    .home-comm-image {
        max-width: 160px;
        right: -0.5rem;
    }

    .col-home-comm:nth-child(2) .home-comm-card .home-comm-image {
        right: -2rem;
    }

    .home-connect-container {
        height: 100%;
        padding: 160px;
    }

    .connect-home-left {
        left: -200px;
    }

    .connect-home-right {
        right: -200px;
    }

    .connect-home-left .image,
    .connect-home-right .image {
        max-width: 400px !important;
    }

    .home-more-image {
        margin-top: -80px;
    }

    /*====================================== SECTION INTRODUCTION QUESTION ======================================*/
    section.section-introduction .backto {
        left: 2rem;
    }

    #questionForm {
        padding: 3rem 0;
        margin: 2rem auto 10rem auto;
    }

    .step-image {
        max-width: 25rem !important;
    }

    /*====================================== SECTION ONBOARDING CREATE GROUP ======================================*/
    section.section-onboarding .backto {
        left: 8px;
    }

    .onboard-card-preview {
        position: sticky;
        top: 94px;
    }

    /*====================================== SECTION SEARCH ======================================*/
    .search-sort {
        margin-top: 4px;
    }

    /*====================================== SECTION FAQ ======================================*/

    .faq-wrapper-head a[aria-expanded="false"]:hover,
    .faq-wrapper-head a[aria-expanded="false"]:focus:hover {
        padding: 8px 0;
    }

    /*====================================== SECTION EVENT LIST ======================================*/
    .event-card-date {
        top: 320px;
    }

    .event-card-detail {
        flex-direction: row;
    }

    .event-card-desc {
        max-width: 70%;
    }

    /*====================================== SECTION EVENT DETAIL ======================================*/

    /*====================================== SECTION EDIT PROFILE ======================================*/
    .profile-question .image {
        max-width: 128px !important;
    }

    .profile-card-edit .upload-pp-group .badge-verified img.icon-32 {
        width: 2rem;
        height: 2rem;
    }

    /*====================================== SECTION SETTING ======================================*/
    .setting-wrapper .post-feed-row .user-uname {
        max-width: 100%;
        width: 100%;
    }

    /*====================================== SECTION MY EVENT ======================================*/
    .profile-edit-container li.nav-item .nav-link {
        font-size: 14px;
    }

    .profile-event-row {
        width: 100%;
    }

    .profile-event-row .event-card-date {
        width: auto;
        z-index: 7;
        top: 84px;
        height: auto;
        padding: 0.5rem 1rem;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 0.5rem;
    }

    .profile-event-row .event-card-date h4 {
        order: 2;
    }

    .profile-event-row .event-card-date span {
        order: 3;
        margin-left: auto;
    }

    .profile-event-row .event-card-desc {
        flex-direction: column;
    }

    .profile-event-row .event-card-detail {
        flex-direction: row !important;
        gap: 0 !important;
    }

    .profile-event-row .event-card-desc .event-card-image .image img {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .profile-event-row .event-card-desc {
        border-bottom-right-radius: 0;
    }

    .profile-event-row .event-card-image {
        max-width: 100%;
        height: 140px;
    }

    .profile-event-row .event-card-summary {
        max-width: 240px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /*====================================== SECTION MY FEED ======================================*/
    .event-thumbnail-all .event-thumbnail-image,
    .event-thumbnail-all a {
        width: 100%;
    }

    #modalComment .modal-content {
        max-height: 100vh;
    }

    #modalComment .post-timeline-container {
        /* height: 450px; */
    }

    /*====================================== SECTION GROUP ======================================*/
    .group-profile-summary {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    #modalEventList .modal-header {
        z-index: 9;
        position: sticky;
        top: 0;
        background-color: var(--c-white);
    }

    #modalEventList .event-card-date {
        top: 128px;
    }

    #modalEventList .event-card-detail {
        flex-direction: column;
    }

    #modalEventList .event-card-desc,
    #modalEventList .event-card-summary {
        max-width: 100%;
        width: 100%;
    }

    /*====================================== SECTION POINT ======================================*/
    .point-hero .point-hero-bg .image {
        transform: scale(1.35);
    }

    /*====================================== SECTION FOOTER ======================================*/
    .footer-wording-ojk {
        width: 50%;
    }
}

/* Landscape iPad Mini & Tab */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /*====================================== SECTION HOME PAGE ======================================*/
    .service-indicator-wrapper {
        left: 0.5rem;
    }

    .service-card article {
        flex-basis: 50%;
    }

    .service-card .service-image {
        flex-basis: 40%;
    }

    .home-about-image {
        width: 400px !important;
        transform: translateY(148px);
    }

    .connect-home-left .image,
    .connect-home-right .image {
        max-width: 320px !important;
    }

    .home-feature {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .home-feature-layer {
        bottom: 0;
    }

    /*====================================== SECTION REGISTER ======================================*/
    .terms-container {
        margin: 0 auto 0 auto;
        padding: 2rem 1rem 2rem 1rem;
    }

    .terms-image {
        max-width: 12rem !important;
        position: sticky;
        top: 128px;
        bottom: auto;
        left: auto;
    }

    /*====================================== SECTION SEARCH PAGE ======================================*/
    .search-wrapper .search-comm .form-group,
    .search-comm .form-group {
        margin-bottom: 0;
    }

    /*====================================== SECTION ONBOARDING CREATE GROUP ======================================*/
    .onboard-card-preview {
        position: sticky;
        top: 106px;
        margin-top: 0;
    }

    /*====================================== SECTION MY EVENT ======================================*/
    .profile-event-row .event-card-date {
        top: 62px;
    }

    /*====================================== SECTION MY FEED ======================================*/
    #modalComment .post-timeline-container {
        height: auto;
    }

    /*====================================== SECTION GROUP ======================================*/
    section.section-group-profile .group-sidebar,
    section.section-group-profile .group-event-container,
    .feed-post-comment-self {
        display: flex !important;
    }

    #modalStory .swiper-story-detail {
        padding: 32px 0 16px 0;
    }

    /*====================================== SECTION POIINT page ======================================*/
    .point-hero .point-hero-bg .image {
        transform: scale(1.3);
    }
}

@media (min-width: 993px) and (max-width: 1023px) {
    .container-nav {
        gap: 2rem;
    }

    .container-nav .nav-logo a .image {
        width: 8rem;
    }

    .nav-menu ul {
        gap: 0.5rem;
    }

    .nav-menu li .li-divider {
        width: 36px;
    }

    .point-hero .point-hero-bg .image {
        transform: scale(1.3);
    }
}

/* 11-12.99 Inch */
/* @media (min-width: 1024px) and (max-width: 1152px) { */
@media (min-width: 1024px) and (max-width: 1247px) {
    /*====================================== SECTION HOME PAGE ======================================*/

    .home-hero-image .image {
        width: 6rem;
    }

    .home-about-image {
        width: 400px !important;
    }

    .connect-home-left .image,
    .connect-home-right .image {
        max-width: 320px !important;
    }

    .connect-home-left {
        left: -156px;
    }

    .connect-home-right {
        right: -156px;
    }

    /*====================================== SECTION FORGOT PAGE ======================================*/
    section.section-forgot .hero-top {
        height: auto;
    }

    /*====================================== SECTION SEARCH & EVENT PAGE ======================================*/
    .event-detail-hero .swiper-slide .event-hero-banner .image {
        min-height: 240px;
        max-height: 240px;
    }

    /*====================================== SECTION EDIT PROFILE PAGE ======================================*/
    .profile-menu ul {
        margin-bottom: 16px;
    }

    /*====================================== SECTION POINT PAGE ======================================*/

    .point-hero .point-hero-bg .image {
        transform: scale(1.4);
    }
}

/* >15 Inch */
@media (min-width: 1440px) {
    .logo-wave {
        top: 272px;
        left: 0;
        transform: scale(0);
    }
}

/* >16 Inch */
@media (min-width: 1550px) {
    section.section-home-hero {
        padding: 10rem 0 0 0;
    }

    section.section-home-hero .container {
        justify-content: start !important;
    }

    section.section-search-community .container-fluid,
    section.section-event-list .container-fluid,
    section.section-event-detail .container-fluid {
        max-width: 1320px;
        margin: 0 auto;
    }

    .nav-menu .nav-footer {
        bottom: -100px;
    }

    .logo-wave {
        top: 300px;
        left: 0;
        transform: scale(0);
    }
}

@media (min-width: 1880px) {
    .logo-wave {
        top: 360px;
    }
}

@media (min-width: 2600px) {
    .logo-wave {
        top: 448px;
    }
}