@import url(./rvp-new-variables.css);


/* ####################################################################################################################### */
/* ####################################################### DEKSTOP ####################################################### */
/* ####################################################################################################################### */
@media screen and (min-width: 1025px) {
    /* #region ============= GLOBAL ============= */
    :root {
        --maxPage: 2000px;
    }
    /* #endregion ========== GLOBAL ============= */
}


/* ###################################################################################################################### */
/* ####################################################### TABLET ####################################################### */
/* ###################################################################################################################### */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* #region ============= GLOBAL ============= */
        :root {
            --maxPage: 100%;
        }

        .subtitle {
            font-size: 2.25rem;
        }
        .desc {
            font-size: 1.1rem;
        }
    /* #endregion ========== GLOBAL ============= */

    /* #region ============= NAVBAR ============= */
        #navbar {
            padding: 1.5rem 3rem;

            .brand {
                svg {
                    width: auto;
                    height: 35px;
                }
            }
            
            .nav-menu {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 2rem 1.5rem;
                background-color: var(--hitam);
                opacity: 0;
                pointer-events: none;
                overflow: hidden;

                ul {
                    width: 100%;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1.75rem;

                    li {
                        list-style: none;

                        a {
                            color: var(--putih);
                            font-size: 1.25rem;
                            text-decoration: none;
                            transition: var(--anim);

                            &:is(:hover, :active) {
                                color: var(--primary);
                            }
                        }
                    }
                }
            }

            .git {
                display: none;
            }

            label[for="nav-toggle"] {
                display: grid;
                z-index: 999;
            }

            #nav-toggle:checked ~ .nav-menu {
                opacity: 1;
                pointer-events: all;
            }
            #nav-toggle:checked ~ label[for="nav-toggle"] i:first-child {
                display: none;
            }
            #nav-toggle:checked ~ label[for="nav-toggle"] i:last-child {
                display: block;
            }
        }
    /* #endregion ========== NAVBAR ============= */

    /* #region ============= HEADER ============= */
        header {
            .text {
                padding: 3rem;
                padding-bottom: 5rem;
                
                p:first-of-type {
                    font-size: 4rem;
                    line-height: 1.3;
                }
                p:nth-of-type(2) {
                    font-size: 3rem;
                    line-height: 1.3;
                }
                p:last-of-type {
                    font-size: 1.25rem;
                }
            }
        }
    /* #endregion ========== HEADER ============= */
    
    /* #region ============= TENTANG ============= */
        #about {
            grid-template-columns: 1fr;
            align-items: flex-start;
            gap: 2rem;
            padding: 4rem 2rem;
            margin-top: 2rem;

            .images {
                height: 500px;

                div {
                    &:first-child {
                        span {
                            left: -.5rem;
                        }
                    }
                    &:nth-child(2) {
                        span {
                            left: -.5rem;
                        }
                    }
                    &:nth-child(3) {
                        span {
                            right: -.5rem;
                        }
                    }
                    &:last-child {
                        span {
                            right: -.5rem;
                        }
                    }
                }
            }

            .text {
                .top {
                    margin-bottom: 2rem;
                }
                .info {
                    gap: 1rem;

                    a {
                        font-size: 1rem;
                        padding: 1rem 1.25rem;

                        i {
                            display: none;
                        }
                    }
                }
            }
        }
    /* #endregion ========== TENTANG ============= */

    /* #region ============= USAHA SEDIKIT ============= */
        #effortless {
            padding: 4rem 2rem;

            .title {
                margin-bottom: 3rem;
            }
            .wrapper {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }
        }
    /* #endregion ========== USAHA SEDIKIT ============= */

    /* #region ============= USAHA SENDIRI ============= */
        #selfEmployed {
            padding: 4rem 0;

            .wrapper {
                height: 90vh;

                .big-image {
                    img {
                        width: auto;
                        height: 80%;
                        object-fit: contain;
                        object-position: center bottom;
                    }
                }
    
                .wheel-prob {
                    .rotating-prob {                        
                        .item-prob {
                            div {
                                p {
                                    span {
                                        font-size: 1.15rem;

                                        b {
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    /* #endregion ========== USAHA SENDIRI ============= */

    /* #region ============= NABUNG ============= */
    #saving {
        padding: 4rem 2rem;

        .inflasi {
            .title {
                margin-bottom: 2rem;
            }

            .perbedaan {
                .compare {
                    gap: 1rem;
                    padding: 0;

                    .home,
                    .money {
                        padding: 1rem;

                        > p {
                            font-size: 1rem;
                            text-align: center;
                        }
                        .wrapper {
                            gap: .5rem;

                            .txt {
                                p:first-child {
                                    font-size: 1.1rem;
                                }
                                p:nth-child(2) {
                                    font-size: 3.25rem;
                                }
                                p:last-child {
                                    font-size: 1rem;
                                }
                            }

                            .wrap-img {
                                height: 150px;
                                min-width: 150px;
                            }
                        }
                    }
                }
            }
        }
    }
    /* #endregion ========== NABUNG ============= */

    /* #region ============= CARA KERJA ============= */
        #howItWorks {
            padding: 0 2rem;
            
            .wrapper {
                grid-template-columns: 1fr;
                height: fit-content;
                gap: 0;

                .image {
                    width: 100%;
                    height: 375px;
                    
                    div {
                        height: 100%;
                    }
                }

                
            }
        }
    /* #endregion ========== CARA KERJA ============= */

    /* #region ============= REVOLUTION ============= */
        #revolution {
            .solusi {
                padding: 0 2rem;
                margin: 8rem 0 0 0;
            }

            .building {
                height: 55vh;

                &::after {
                    height: 100%;
                }
            }

            .revo-desc {
                padding: 2rem;

                .logo {
                    svg {
                        width: 75px;
                    }
                }

                .keunggulan {
                    margin-bottom: 5rem;

                    .text {
                        grid-template-columns: 1fr 1fr;
                        gap: 1rem;
                    }
                }
            }
        }
    /* #endregion ========== REVOLUTION ============= */

    /* #region ============= KEUNTUNGAN ============= */
        #keuntungan {
            .teks, .info {
                max-width: 95%;
            }
        }
    /* #endregion ========== KEUNTUNGAN ============= */

    /* #region ============= RUNNING PROPERTY ============= */
        #runningProp {
            padding: 4rem 0;
            margin-bottom: 6rem;

            .title {
                margin-bottom: 3rem;
            }

            .lokasi-nama {
                padding: 0 2rem;

                .carousel-resort {
                    .carousel-cell {
                        .resort-item-head {
                            padding: 1.25rem;

                            .resort-item-txt {
                                div {
                                    p:first-child {
                                        font-size: 2rem;
                                    }
                                    p:last-child {
                                        font-size: 1rem;
                                    }
                                }
                            }
                        }

                        .desc-resort {
                            padding: 1.25rem;                       
                        }
                    }
                }
            }
        }
    /* #endregion ========== RUNNING PROPERTY ============= */

    /* #region ============= TESTIMONI ============= */
        #testimoni {
            .comments {
                justify-content: center;
                padding: 0 2rem;

                .title {
                    max-width: 90%;
                }
            }
        }
    /* #endregion ========== TESTIMONI ============= */

    /* #region ============= HARGA ============= */
        #harga {
            padding: 0 2rem;

            .opsi {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 0;
            }

            .faq {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 0;

                .faq-more {
                    padding: 0 1rem;
                }
            }
        }
    /* #endregion ========== HARGA ============= */

    /* #region ============= HUBUNGI ============= */
        #hubungi {
            display: flex;
            flex-direction: column-reverse;
            grid-template-columns: unset;
            align-items: center;
            gap: 4rem;
            padding: 0 2rem;

            .kontak-area {
                width: 100%;
                height: 100%;

                .kontak-list {
                    width: 100%;
                    margin-top: 40%;

                    .socmed {
                        width: 100%;
                    }
                }
            }
        }
    /* #endregion ========== HUBUNGI ============= */

    /* #region ============= FOOTER ============= */
        #footer {
            padding: 3rem 2rem 2rem 2rem;

            .wrap {
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 2rem;

                .logo {
                    max-width: unset;
                }
                .member {
                    max-width: 100%;

                    div:last-child {
                        img {
                            width: 50%;
                        }
                    }
                }
            }
        }
    /* #endregion ========== FOOTER ============= */
}


/* ##################################################################################################################### */
/* ####################################################### HP ########################################################## */
/* ##################################################################################################################### */
@media screen and (max-width: 767px) {
    /* #region ============= GLOBAL ============= */
        :root {
            --maxPage: 100%;
        }

        .subtitle {
            font-size: 2rem;
        }
        .desc {
            font-size: 1rem;
        }
    /* #endregion ========== GLOBAL ============= */

    /* #region ============= MODAL POPOVER ============= */
        [popover] {
            max-width: calc(100% - 1.5rem);
        }
    /* #endregion ========== MODAL POPOVER ============= */

    /* #region ============= NAVBAR ============= */
        #navbar {
            padding: 1.5rem;

            .brand {
                svg {
                    width: auto;
                    height: 35px;
                }
            }
            
            .nav-menu {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 2rem 1.5rem;
                background-color: var(--hitam);
                opacity: 0;
                pointer-events: none;
                overflow: hidden;

                ul {
                    width: 100%;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1.75rem;

                    li {
                        list-style: none;

                        a {
                            color: var(--putih);
                            font-size: 1.25rem;
                            text-decoration: none;
                            transition: var(--anim);

                            &:is(:hover, :active) {
                                color: var(--primary);
                            }
                        }
                    }
                }
            }

            .git {
                display: none;
            }

            label[for="nav-toggle"] {
                display: grid;
                z-index: 999;
            }

            #nav-toggle:checked ~ .nav-menu {
                opacity: 1;
                pointer-events: all;
            }
            #nav-toggle:checked ~ label[for="nav-toggle"] i:first-child {
                display: none;
            }
            #nav-toggle:checked ~ label[for="nav-toggle"] i:last-child {
                display: block;
            }
        }
    /* #endregion ========== NAVBAR ============= */

    /* #region ============= HEADER ============= */
        header {
            .toggle-sound {
                right: 2rem;
                bottom: 2rem;
            }

            .text {
                justify-content: center;
                align-items: center;
                text-align: center;
                padding: 1.5rem;
                padding-bottom: 3.25rem;
                
                p:first-of-type {
                    font-size: 2.5rem;
                    line-height: 1.3;
                }
                p:nth-of-type(2) {
                    font-size: 2.75rem;
                    line-height: 1.3;
                }
                p:last-of-type {
                    font-size: 1.25rem;
                }
            }
        }
    /* #endregion ========== HEADER ============= */

    /* #region ============= TENTANG ============= */
        #about {
            grid-template-columns: 1fr;
            align-items: flex-start;
            gap: 2rem;
            padding: 4rem 1rem;
            margin-top: 2rem;

            .images {
                height: 400px;

                div {
                    &:first-child {
                        span {
                            left: -.5rem;
                        }
                    }
                    &:nth-child(2) {
                        span {
                            left: -.5rem;
                        }
                    }
                    &:nth-child(3) {
                        span {
                            right: -.5rem;
                        }
                    }
                    &:last-child {
                        span {
                            right: -.5rem;
                        }
                    }
                    span {
                        font-size: .75rem;
                        padding: .5rem;
                        border-radius: .5rem;

                        i {
                            display: none;
                        }
                    }
                }
            }

            .text {
                .top {
                    margin-bottom: 2rem;
                }
                .info {
                    gap: 1rem;

                    a {
                        font-size: 1rem;
                        padding: 1rem 1.25rem;

                        i {
                            display: none;
                        }
                    }
                }
            }
        }
    /* #endregion ========== TENTANG ============= */
    
    /* #region ============= USAHA SEDIKIT ============= */
        #effortless {
            padding: 4rem 1rem;

            .title {
                margin-bottom: 3rem;
            }
            .wrapper {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
    /* #endregion ========== USAHA SEDIKIT ============= */

    /* #region ============= USAHA SENDIRI ============= */
        #selfEmployed {
            min-height: fit-content;
            padding: 4rem 0;

            .wrapper {
                height: 50vh;

                .big-image {
                    img {
                        width: auto;
                        height: 70%;
                        object-fit: contain;
                        object-position: center bottom;
                    }
                }
    
                .wheel-prob {
                    --wheelHeightProb: 300px;
                    --iconWidthProb: 42px;

                    &::before {
                        border: 3px dashed var(--red);
                    }
                    
                    .rotating-prob {                        
                        .item-prob {
                            div {
                                font-size: 1.25rem;

                                p {
                                    span {
                                        top: calc(100% + 1rem);
                                        font-size: .8rem;
                                        white-space: wrap;

                                        b {
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    /* #endregion ========== USAHA SENDIRI ============= */

    /* #region ============= NABUNG ============= */
    #saving {
        padding: 4rem 1rem;

        .inflasi {
            .title {
                margin-bottom: 2rem;
            }

            .perbedaan {
                .compare {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                    padding: 0;

                    .home,
                    .money {
                        padding: 1rem;

                        > p {
                            font-size: 1rem;
                            text-align: center;
                        }
                        .wrapper {
                            gap: .5rem;

                            .txt {
                                p:first-child {
                                    font-size: 1.1rem;
                                }
                                p:nth-child(2) {
                                    font-size: 3.25rem;
                                }
                                p:last-child {
                                    font-size: 1rem;
                                }
                            }

                            .wrap-img {
                                height: 150px;
                                min-width: 150px;
                            }
                        }
                    }
                }

                .slider {
                    datalist {
                        display: none;
                    }
                }
            }
        }
    }
    /* #endregion ========== NABUNG ============= */

    /* #region ============= CARA KERJA ============= */
        #howItWorks {
            padding: 0 1rem;
            
            .wrapper {
                grid-template-columns: 1fr;
                height: fit-content;
                gap: 2rem;

                .image {
                    width: 100%;
                    height: 375px;
                    
                    div {
                        height: 100%;
                    }
                }

                .text {
                    .list-text {
                        .item {
                            span {
                                color: var(--putih);
                                background-color: var(--primary);

                                &::before {
                                    height: 275%;
                                    background-color: hsl(from var(--primary) h s 50);
                                }
                            }
                            div {
                                color: var(--black);
                                background-color: var(--white);
                                box-shadow: var(--shadow);
                            }
                            p:first-child {
                                font-size: 1rem;
                            }
                            p:last-child {
                                font-size: .9rem;
                            }
                        }
                    }
                }
            }
        }
    /* #endregion ========== CARA KERJA ============= */

    /* #region ============= REVOLUTION ============= */
        #revolution {
            .solusi {
                padding: 0 1rem;
                margin: 8rem 0 0 0;
            }

            .building {
                height: 55vh;

                &::after {
                    height: 100%;
                }
            }

            .revo-desc {
                padding: 1rem;

                .logo {
                    svg {
                        width: 75px;
                    }
                }

                .keunggulan {
                    margin-bottom: 5rem;

                    .text {
                        grid-template-columns: 1fr;
                        gap: 1rem;
                    }
                }
            }
        }
    /* #endregion ========== REVOLUTION ============= */

    /* #region ============= BENEFIT ============= */
        #benefit {
            justify-content: center;
            padding: 0 1rem;

            .wrapper {
                --wheelWidth: 320px;
                --iconWidth: 55px;
                
                grid-template-columns: 1fr;
                grid-template-rows: var(--wheelWidth) auto;
                justify-content: center;
                gap: 1rem;    
                padding: 0;
                
                .left {
                    &::before {
                        left: -15%;
                        width: 50%;
                    }
                    .rv-logo {
                        p {
                            font-size: 2.5rem;
                            
                            &:last-child {
                                font-size: 2.1rem;
                            }
                        }
                    }

                    .wheel {                        
                        .rotating {
                            .item-wheel {
                                div {
                                    height: var(--iconWidth);
                                    font-size: 1.75rem;
                                }
                            }
                        }
                    }
                }

                .right {
                    &::before {
                        width: 100%;
                        height: calc(var(--wheelWidth));       
                    }
                    .stacked {
                        &::before,
                        &::after {
                            height: 125px;
                        }
                        .moving-stacked {
                            max-height: calc(var(--wheelWidth) + 100px);

                            > div {
                                height: 300px;
                                padding: .5rem 1rem .5rem 1rem;

                                &:first-child {
                                    margin-top: 175px;
                                }
                            }
                            .item-stacked {
                                p:first-child {
                                    font-size: 1.35rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    /* #endregion ========== BENEFIT ============= */

    /* #region ============= KEUNTUNGAN ============= */
        #keuntungan {
            padding-top: 15rem;
            
            .title {
                text-align: center;
                padding: 0 1rem;
                margin-bottom: 6rem;

                span {
                    display: none;
                }
            }

            .benefit-item {
                padding: 0 1.5rem 2rem 1.5rem;

                > p {
                    font-size: 2.5rem;
                }
            }
            .teks {
                max-width: 100%;

                p {
                    font-size: 1rem;
                }
                .info {
                    gap: 1rem;

                    img {
                        min-width: 100px;
                        width: 100px;
                        border-radius: .5rem;
                    }
                    span {
                        display: none;
                    }
                }
            }

            .explain-benefit {
                > p {
                    font-size: 1rem;
                    margin-bottom: 0;
                }
                > ul {
                    padding-left: 1.25rem;
                    margin-top: .5rem;
                    margin-bottom: 1.25rem;
                }
                .contoh {
                    flex-direction: column;
                    gap: 0;

                    img {
                        max-width: 75%;
                    }
                }
                .item-contoh > p {
                    color: var(--secondary);
                    font-size: 1rem;
                    padding: 0;
                    margin-top: .5rem;
                    margin-left: 1.25rem;
                    margin-bottom: .25rem;
                    background-color: transparent;
                    border-radius: 0;
                }
                .item-contoh > ul {
                    padding-left: 1.25rem;
                    margin-bottom: .5rem;

                    li div p {
                        &:first-child{
                            min-width: fit-content;
                            margin-right: 1rem;
                        }
                    }
                    li div span:last-of-type {
                        display: none;
                    }
                }
            }
            .explain-bisnis {         
                .contoh {
                    > p {
                        margin-left: 0;
                        margin-bottom: 1rem;
                    }
                    ul {
                        padding-left: 1rem;

                        li div p {
                            font-size: 1rem;
                        }
                        li:not(:last-child) {
                            margin-bottom: .25rem;
                        }
                    }
                }
                .hasil {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 2rem;
                    
                    .pembagian {
                        width: 100%;
                        justify-content: center;
                        gap: 2rem;
                        padding-left: 0;
                        border-left: none;
                        
                        p:first-child {
                            font-size: 1.1rem;
                        }
                        p:nth-child(2) {
                            font-size: 3.75rem;
                        }
                        p:last-child {
                            font-size: 1.2rem;
                        }
                    }
                }
            }
            .explain-capital {
                p {
                    font-size: 1.1rem;
                    margin-bottom: 1rem;
                }
                img {
                    width: 100%;
                    max-height: auto;
                }
            }
            .explain-exchange {
                > p {
                    font-size: 1.1rem;
                    margin-bottom: 2rem;
                }
                .tukar > p {
                    margin-top: 1rem;
                }
                .tukar-harga {
                    gap: 1rem;
                    width: 100%;
                    padding: .75rem 1rem .75rem .75rem;
                    margin-bottom: 1rem;

                    img {
                        width: 50px;
                        height: auto;
                    }
                    p:first-child {
                        font-size: 1.1rem;
                    }
                    p:last-child {
                        font-size: 1.5rem;
                    }
                }
                .tukar-item {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 1rem;

                    > div {
                        gap: 1rem;
                    }
                    i {
                        width: 45px;
                        height: 45px;
                        font-size: 1.5rem;
                    }
                    p:nth-of-type(1) {
                        font-size: 1.25rem;
                    }
                }
            }
        }
    /* #endregion ========== KEUNTUNGAN ============= */

    /* #region ============= RUNNING PROPERTY ============= */
        #runningProp {
            padding: 4rem 0;
            margin-bottom: 6rem;

            .title {
                margin-bottom: 3rem;
            }

            .lokasi-nama {
                padding: 0 1rem;

                .carousel-resort {
                    height: 100%;

                    .carousel-cell {
                        margin-right: 2rem;
                        border-radius: 1rem;
                        
                        &::before {
                            border-radius: 1rem 1rem 0 0;
                        }
                        &::after {
                            background: linear-gradient(to top, var(--black) 25%, transparent 80%);
                        }

                        .resort-item-head {
                            padding: 1rem;
                            
                            .resort-item-txt {
                                flex-direction: column;
                                justify-content: flex-start;
                                align-items: flex-start;
                                
                                div {
                                    p:first-child {
                                        font-size: 1.5rem;
                                    }
                                    p:last-child {
                                        font-size: .95rem;
                                    }
                                }
                                a {
                                    width: 100%;
                                    text-align: center;
                                    padding: .75rem 1rem;
                                }
                            }
                        }

                        .desc-resort {
                            padding: 1rem;

                            .desc-resort-pics {
                                grid-template-columns: 1fr;
                                gap: 1rem;
                            }                        
                        }
                    }

                    .flickity-prev-next-button {
                        top: auto;
                        bottom: -65px;
                        width: 50px;
                        height: 50px;
                        border: 4px solid var(--mainBg);
                    }
                    & .flickity-prev-next-button.previous {
                        left: 3%;
                    }
                    .flickity-prev-next-button.next {
                        right: 3%;
                    }
                }
            }
        }
    /* #endregion ========== RUNNING PROPERTY ============= */

    /* #region ============= NEXT DEV ============= */
        #nextProp {
            padding: 4rem 0;

            .swiper {
                width: 100%;
                padding: 0 0 50px 0;
            }
            .swiper-slide {
                width: 350px;
            }
        }
    /* #endregion ========== NEXT DEV ============= */

    /* #region ============= TESTIMONI ============= */
        #testimoni {
            .photos {
                .wrap {
                    grid-template-columns: repeat(3, 1fr);
                    padding: 0 .75rem;
                    
                    .column {
                        &:first-child,
                        &:nth-child(2),
                        &:nth-child(6),
                        &:nth-child(7),
                        &:nth-child(8),
                        &:last-child {
                            display: none;
                        }

                        .photo {
                            height: 150px;
                        }
                    }
                }
            }

            .comments {
                padding: 0 1rem;

                .title {
                    max-width: 90%;
                    margin-bottom: 2rem;
                }

                .review {
                    gap: 1rem;
                    padding: 0 1rem 5rem 1rem;

                    .review-item {
                        padding: 2rem 1.25rem 1.25rem 1.25rem;
                    }
                }
            }
        }
    /* #endregion ========== TESTIMONI ============= */

    /* #region ============= MINI STRIP ============= */
        #miniStrip {
            min-height: 400px;
            padding: 0 1.5rem;
            
            .wrapper {
                flex-direction: column;
                justify-content: center;
                gap: 3rem;

                div {
                    p:first-child {
                        font-size: 3rem;
                        line-height: 1.3;
                    }
                }
            }
        }
    /* #endregion ========== MINI STRIP ============= */

    /* #region ============= HARGA ============= */
        #harga {
            padding: 0 1rem;

            .title {
                margin-bottom: 3rem;
            }

            .opsi {
                grid-template-columns: 1fr;
                gap: 1rem;
                padding: 0;

                .paket {
                    &:hover .wrap {
                        transform: translateY(-0px);
                    }
                }
            }

            .faq {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 0;

                .faq-more {
                    padding: 0 1rem;

                    img {
                        width: 100px;
                    }
                    .subtitle {
                        font-size: 1.75rem;
                    }
                    .desc {
                        margin-bottom: 1rem;
                    }
                    a {
                        font-size: 1rem;
                        padding: 1rem 1.25rem;
                    }
                }

                .faq-list {
                    .faq-item {
                        padding: .75rem;
                        background-color: var(--putih);
                        border-radius: 1rem;

                        input {
                            display: none;
                        }
                        label {
                            span:first-child {
                                & i {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    /* #endregion ========== HARGA ============= */

    /* #region ============= HUBUNGI ============= */
        #hubungi {
            display: flex;
            flex-direction: column-reverse;
            grid-template-columns: unset;
            align-items: center;
            padding: 0 1rem;

            .kontak-area {
                height: 100%;
                padding: 1.25rem;

                .kontak-list {
                    .socmed {
                        > div {
                            gap: .5rem;
                        }
                    }
                }
            }

            .form-area {
                .title {
                    margin-bottom: 1rem;
                }
            }
        }
    /* #endregion ========== HUBUNGI ============= */

    /* #region ============= FOOTER ============= */
        #footer {
            padding: 3rem 1rem 1rem 1rem;

            .wrap {
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 2rem;

                .member {
                    max-width: 100%;

                    div:last-child {
                        img {
                            width: 85%;
                        }
                    }
                }
            }
        }
    /* #endregion ========== FOOTER ============= */
}