/* ############## TABLET UP (768px) ############## */
@media (width >= 48em) {
    /* #region ====== GENERAL ====== */
        :root {
            --main-padding-x: var(--space-lg);
            --section-padding-y: var(--space-5xl);
        }

        .title {
            font-size: var(--font-size-5xl);
        }
    /* #endregion ====================== */
    
    /* #region ====== NAVBAR ====== */
        #navbar {
            .nav-brand,
            .logo-nav-mobile {
                svg {
                    height: 38px;
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== FOOTER ====== */
        footer {
            .top {
                grid-template-columns: 1fr .5fr 1fr;
                grid-template-rows: repeat(2, -webkit-max-content);
                grid-template-rows: repeat(2, max-content);
            }
            .profile {
                grid-column: span 3;
            }
            .cta-footer .rv-btn {
                margin-bottom: .5rem;
            }
            .mark {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;

                .social {
                    justify-content: flex-start;
                    font-size: 1.5rem;
                    margin-bottom: 0;
                }
                b {
                    display: inline-block;
                    position: relative;

                    &::before {
                        content: '-';
                        display: inline-block;
                        margin: 0 .5rem;
                    }
                }
            }
        }
    /* #endregion ====================== */

    /* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== MAIN HEADER ====== */
        #mainHeader {
            .blob {
                left: auto;
                right: 0;
                bottom: 0;
                width: 80vw;
                background-position: right bottom;
            }
            
            .text {
                padding-top: calc(80px + 2rem);
                
                h1 {
                    font-size: 3.5rem;
                    margin-bottom: 1rem;
                }
                h4 {
                    margin-bottom: 1rem;
                }
                h3 {
                    max-width: 85%;
                    font-size: var(--font-size-lg);
                    margin-bottom: 2rem;
                }
                .cta-hero {
                    gap: .75rem;
                }
                .rv-secondary-outline {
                    display: flex;
                }
            }
            
            .image {
                height: calc(55% - 65px);
                background-size: contain;
                background-position: right bottom;
            }

            .running-logo {
                --card-w: 45px;
            }
        }
    /* #endregion ====================== */
    
    /* #region ====== PROBLEM ====== */
        #problem {
            .problem-wrap {
                grid-template-columns: 0.85fr 1.15fr;
                align-items: center;
                gap: 1.75rem;
            }
            .feature {
                padding: 1.75rem;

                .feature-icon {
                    margin-bottom: 2rem;
                }
                h3 {
                    font-size: var(--font-size-2xl);
                    margin-bottom: 1rem;
                }
                .feature-bg {
                    height: 150px;
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== CONSEQUENCE ====== */
        #consequence {
            .consequence-wrap {
                margin-top: 3rem;
            }
        }
    /* #endregion ====================== */

    /* #region ====== COMPARISON ====== */
        #comparison {
            padding: var(--section-padding-y) var(--main-padding-x) calc(var(--section-padding-y) * 1.5) var(--main-padding-x);

            .bg-img {
                &::after {
                    width: 80%;
                }
            }
            
            .head-sect .title {
                max-width: 70%;
                margin-inline: auto;
            }
            .head-sect .desc {
                max-width: 90%;
                margin-inline: auto;
            }

            .diff {
                grid-template-columns: 1fr 1fr;
                gap: 3rem;
                margin-top: 3rem;
            }
            .diff-img {
                position: absolute;
                bottom: -1rem;
                left: 50%;
                transform: translateX(-50%);
                width: 225px;

                img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                    object-position: center bottom;
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== SOLUTION ====== */
        #solution {
            .solution-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1rem;
            }
            .item {
                flex-direction: column;
                padding: 1.5rem;
                background-color: hsl(from var(--primary) h s l / .5);
                border: 1px solid hsl(from var(--sc-500) h s l / .65);
                border-collapse: collapse;
                transition: var(--anim);
            }
            .item:first-child {
                border-top-width: 1px;
                border-radius: 2rem 0 1rem 0;
            }
            .item:nth-child(2) {
                border-radius: 0 2rem 0 1rem;
            }
            .item:nth-child(3) {
                border-radius: 0 1rem 0 2rem;
            }
            .item:nth-child(4) {
                border-radius: 1rem 0 2rem 0;
            }
        }
    /* #endregion ====================== */
    
    /* #region ====== FLOW ====== */
        #flow {
            .flow-wrap {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 1.25rem;
                align-items: start;
                padding-left: 0;

                .moving-arrow {
                    top: 1rem;
                    left: 10%;
                    animation: arrowRightLoop 4s linear infinite;
                }
                .moving-arrow div {
                    flex-direction: row;
                }
                .moving-arrow span {
                    border-right: none;                    
                    border-top: 9px solid transparent;
                    border-bottom: 9px solid transparent;
                    border-left: 12px solid var(--secondary);
                }

                .step {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    padding-bottom: 0;
                }
                .step::before {
                    display: none;
                }
                .step::after {
                    position: absolute;
                    content: "";
                    top: 1.75rem;
                    left: 50%;
                    width: 100%;
                    height: 0;
                    border-top: 2px dashed var(--text-muted);
                    opacity: .7;
                    z-index: -1;
                }
                .step:last-child::after {
                    display: none;
                }
                .icon-wrap {
                    position: relative;
                    top: unset;
                    left: unset;
                    width: 4rem;
                    height: 4rem;
                    margin-bottom: 1.5rem;
                }
                .icon-wrap img {
                    top: .25rem;
                }
                .badge {
                    left: 70%;
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== PROPERTY ====== */
        #property {
            .property-list {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.25rem;
            }
            .property-item {
                p:nth-of-type(1) {
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== MODAL PROPERTY ====== */  
        .property-modal-hero {
            grid-template-columns: 1.15fr .85fr;
            box-shadow: 0 8px 24px var(--shadow);
            
            .property-modal-pic {
                height: 100%;
                min-height: 19rem;
            }
            .property-modal-desc {
                padding: 2rem 1.5rem;
            }
            .property-modal-desc h2 {
                font-size: var(--font-size-3xl);
            }
            .property-modal-description {
                margin-bottom: 1rem;
            }
        }

        .property-modal-room {
            padding: 3rem 1.75rem 1rem 1.75rem;

            .room-type {
                grid-template-columns: minmax(260px, .9fr) 1.1fr;
                gap: 1.5rem;
                padding: 1rem;
            }
            .room-images-area {
                align-content: start;
            }
            .room-head {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            .room-facility-list {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        .property-modal-tourism {
            padding: 1rem 1.75rem 2.5rem;

            .tourism-places {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1rem;
            }
            .place-head {
                flex: 1;
                display: flex;
                align-items: flex-start;
                gap: 1rem;
            }
            .thumb {
                flex-shrink: 0;
                height: 100px;
                aspect-ratio: 1;
            }
            .place-info p:nth-child(1) {
                font-size: var(--font-size-lg);
            }
        }
    /* #endregion ====================== */

    /* #region ====== GALLERY ====== */
        #gallery {
            .grid-gallery {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    /* #endregion ====================== */
    
    /* #region ====== LOCATION ====== */
        #location {
            .map-info {
                .text {
                    .pc {
                        display: block;
                    }
                    .mobile {
                        display: none;
                    }
                }
            }
            .wrap-location {
                right: auto;
                bottom: calc(var(--section-padding-y) * .75);
                max-width: 325px;
            }
        }
    /* #endregion ====================== */
    

}

/* ############## DESKTOP UP (1025px) ############## */
@media (width >= 64.0625em) {
    /* #region ====== THEME SWITCH (layer) ====== */
        @layer components {
            .theme-toggle {
                min-width: 2.5rem;
                min-height: 2.5rem;
                font-size: var(--font-size-2xl);
                background-color: transparent;
                border: 1.5px solid transparent;

                &:is(:hover, :focus-visible) {
                    background-color: var(--secondary);
                    border-color: var(--secondary);
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== GENERAL ====== */
        :root {
            --content-max: 960px;
            --main-padding-x: var(--space-2xl);
        }
    /* #endregion ====================== */
    
    /* #region ====== NAVBAR ====== */
        #navbar {
            .navbar-wrap {
                gap: 2rem;
                padding: 1rem 0;
            }
            .nav-menu {
                flex: 1;
                position: unset;
                inset: unset;
                display: unset;
                flex-direction: unset;
                gap: 0;
                color: var(--static-white);
                padding: 0;
                background-color: transparent;
                opacity: 1;
                pointer-events: all;            
                container-type: inline-size;
                container-name: navmenu-container;

                &::before,
                &::after {
                    display: none;
                }
            }
            .nav-menu ul {
                flex: unset;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            .nav-menu ul li {
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content;
                
                .nav-link {
                    position: relative;
                    display: inline-block;
                    width: -webkit-fit-content;
                    width: -moz-fit-content;
                    width: fit-content;
                    color: var(--putih);
                    text-transform: capitalize;
                    line-height: 1;
                    vertical-align: middle;
                    white-space: nowrap;
                    padding: .5rem 1rem;
                    background-color: transparent;
                    border-radius: 3rem;

                    &:is(:hover, :active, .active) {
                        color: var(--secondary) !important;
                        background: transparent;
                    }
                    &::before {
                        content: '';
                        position: absolute;
                        left: 50%;
                        bottom: -2px;
                        width: 50%;
                        height: 2px;
                        background-color: var(--secondary);
                        border-radius: 3rem;
                        transform: translateX(-50%) scaleX(0);
                        transform-origin: center left;
                        transition: var(--anim);
                    }
                    &.active::before {
                        transform: translateX(-50%) scaleX(1);
                    }
                    &::after {
                        display: none;
                    }
                }
            }

            .open-menu,
            .close-menu,
            .logo-nav-mobile {
                display: none;
            }
            .theme-switch {
                display: block;
            }
        }
    /* #endregion ====================== */
    
    /* #region ====== FOOTER ====== */
        footer {
            .top {
                grid-template-columns: 1.4fr .8fr .8fr;
                grid-template-rows: -webkit-max-content;
                grid-template-rows: max-content;
                gap: 3%;
            }
            .profile {
                grid-column: unset;
            }
            .logo {
                gap: 1rem;

                svg {
                    min-width: 40px;
                    width: 40px;
                }
                span {
                    font-size: var(--font-size-3xl);
                }
            }
            .social a:hover {
                color: var(--secondary);
            }
        }
    /* #endregion ====================== */
   
    /* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== MAIN HEADER ====== */
        #mainHeader {
            &::before {
                background: linear-gradient(to right, var(--pr-800) 15%, var(--pr-700), var(--pr-600), var(--pr-500) 85%);
            }
            .blob {
                width: 48vw;
            }
            
            .hero {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 70px;
            }

            .text {
                padding: 0;
                
                h1 {
                    font-size: 4rem;
                    margin-bottom: .75rem;
                }
                h4 {
                    margin-bottom: 1.5rem;
                }
                h3 {
                    max-width: 70%;
                }
                .cta-hero {
                    gap: 1rem;
                    margin-top: 2.5rem;
                }
            }

            .image {
                right: var(--main-padding-x);
                height: 80vh;
                max-height: 750px;
            }

            .wrap-logo {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .running-logo {
                padding: 1rem;

                &:hover .track {
                    -webkit-animation-play-state: paused;
                            animation-play-state: paused;
                }
            }

            .polka {
                bottom: 15%;
                left: 0;
                top: auto;
                right: auto;
            }
        }
    /* #endregion ====================== */

    /* #region ====== PROBLEM ====== */
        #problem {
            .problem-wrap {
                grid-template-columns: 0.75fr 1.25fr;
                gap: 3rem;
                margin-top: 3rem;
            }
            .feature {
                padding: 2.5rem;

                h3 {
                    font-size: var(--font-size-4xl);
                }
                .feature-bg {
                    height: 225px;
                }
            }
            .problem-row {
                img {
                    width: 55px;
                    height: 55px;
                }
                .row-title {
                    font-size: var(--font-size-xl);
                }
                .row-desc {
                    font-size: var(--font-size);
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== CONSEQUENCE ====== */
        #consequence {
            .wrapper {
                display: grid;
                grid-template-columns: auto 0.75fr;
            }
            .head-sect {
                text-align: left;
                margin-bottom: 3rem;

                .title {
                    max-width: 650px;
                }
            }
            .consequence-wrap {
                img {
                    width: 55px;
                    height: 55px;
                }
                p:nth-of-type(1) {
                    font-size: var(--font-size-xl);
                }
                p:nth-of-type(2) {
                    max-width: 100%;
                    font-size: var(--font-size);
                }
            }
            .right {
                display: block;

                img {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    height: 100%;
                    width: auto;
                }
                .bg {
                    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 35%, #000 85%);
                    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 35%, #000 85%);
                }
            }

            .polka {
                right: auto;
                left: 0;
                top: 10%;
            }
        }
    /* #endregion ====================== */

    /* #region ====== COMPARISON ====== */
        #comparison {
            padding: var(--section-padding-y) var(--main-padding-x) 0 var(--main-padding-x);

            .bg-img {
                &::before {
                    display: block;
                    left: 10%;
                    bottom: 1rem;
                    height: 630px;
                    width: 400px;
                    background-image: url(https://rv-affiliate.azureedge.net/revolution-property/landing-page/images/rv-img-comparison-saving.png?se=2099-12-31T23%3A59Z&sp=r&sv=2026-02-06&sr=b&sig=j1QG5t%2FF4ejlm8GAFYNBfkFJLeEEt4K4%2F9LfJo4WFq8%3D);
                }
                &::after {
                    left: auto;
                    right: 8%;
                    transform: unset;
                    bottom: 1rem;
                    width: 850px;
                }
            }

            .head-sect .title {
                max-width: 90%;
                margin-inline: auto;
            }
            .head-sect .desc {
                max-width: 80%;
                margin-inline: auto;
            }

            .diff {
                gap: calc(var(--main-padding-x) * 3.5);
                min-height: 700px;
            }
            .the-way {
                display: flex;
                justify-content: flex-end;
            }
            .the-way.new {
                justify-content: flex-start;
            }
            .diff-card {
                max-width: 350px;
                margin-top: 4rem;
                transition: var(--anim);
                transform: rotate(-5deg) scale(0) translate(50%, 200%);
                transform-origin: right bottom;
            }
            .new .diff-card {
                transform: rotate(5deg) scale(0) translate(-50%, 200%);
                transform-origin: left bottom;
            }
            .diff-img {
                width: 350px;
                bottom: 0;
            }
        }
    /* #endregion ====================== */

    /* #region ====== SOLUTION ====== */
        #solution {
            .solution-grid {
                gap: .5rem;
            }

            .wrapper {
                grid-template-columns: 0.85fr 1.15fr;
                gap: 2.5rem;             
            }
            .item:first-child {
                border-radius: 2rem 0 0 0;

                &:hover {
                    transform: translate(-10px, -10px);
                    box-shadow: 5px 5px 15px rgba(0,0,0,0.35);
                }
            }
            .item:nth-child(2) {
                border-radius: 0 2rem 0 0;
                
                &:hover {
                    transform: translate(10px, -10px);
                    box-shadow: -5px 5px 15px rgba(0,0,0,0.35);
                }
            }
            .item:nth-child(3) {
                border-radius: 0 0 0 2rem;
                
                &:hover {
                    transform: translate(-10px, 10px);
                    box-shadow: 5px -5px 15px rgba(0,0,0,0.35);
                }
            }
            .item:nth-child(4) {
                border-radius: 0 0 2rem 0;
                
                &:hover {
                    transform: translate(10px, 10px);
                    box-shadow: -5px -5px 15px rgba(0,0,0,0.35);
                }
            }
            .item:hover {
                background-color: var(--pr-500);
                border-color: var(--pr-500);
            }

            .icon {
                width: 55px;
                height: 55px;
            }
            .item-title {
                font-size: var(--font-size-xl);
            }
            .item-desc {
                font-size: var(--font-size);
            }
            .rv-btn {
                margin-top: 1rem;
            }
        }
    /* #endregion ====================== */
    
    /* #region ====== FLOW ====== */
        #flow {
            .desc {
                max-width: 70%;
            }
            .flow-wrap {
                gap: 1.75rem;
                margin-top: 6rem;

                .icon-wrap {
                    font-size: var(--font-size-3xl);
                }
                p:nth-of-type(1) {
                    font-size: var(--font-size-xl);
                }
                p:nth-of-type(2) {
                    font-size: var(--font-size);
                }
            }
        }
    /* #endregion ====================== */
    
    /* #region ====== PROPERTY ====== */
        #property {
            .head-sect {
                margin-bottom: 3rem;
            }
            .property-list {
                gap: 1.5rem;
            }
            .property-item {
                img {
                    height: 275px;
                }
                .prop-info {
                    padding: 1.5rem;
                }
                p:nth-of-type(1) {
                    font-size: var(--font-size-2xl);
                    -webkit-line-clamp: 2;
                }
                p:nth-of-type(3) {
                    font-size: var(--font-size);
                }
            }
        }
    /* #endregion ====================== */

    /* #region ====== FAQ ====== */
        #faq {
            padding: var(--section-padding-y) var(--main-padding-x);

            .wrapper {
                display: grid;
                grid-template-columns: 0.8fr 1.2fr;
                align-items: start;
                gap: 2rem;
                margin: 0 auto;
            }
            .head-sect {
                position: sticky;
                top: 2rem; 
                margin-top: 2rem;
            }
            .faq-q {
                font-size: var(--font-size-lg);
            }
            .faq-a p {
                font-size: var(--font-size);
            }

            .net {
                --pos: left 50%;
                --size: 300px;
                --sqr: 40px;

                top: auto;
                left: 0;
                bottom: calc(var(--section-padding-y) * -1);
                right: auto;
            }
        }
    /* #endregion ====================== */

    /* #region ====== GALLERY ====== */
        #gallery {
            .grid-gallery {
                grid-template-columns: repeat(5, 1fr);
            }
            .gallery-layout {
                margin-top: 4rem;
            }
            .filter-gallery {
                margin-bottom: 2.5rem;
            }
            .polka {
                right: 0;
                top: var(--section-padding-y);
                transform: scale(1.2);
                transform-origin: right top;
            }
        }
    /* #endregion ====================== */

    /* #region ====== CONTACT ====== */
        #contact {
            .wrapper {
                display: grid;
                grid-template-columns: .85fr 1.15fr;
                align-items: center;
                gap: 2rem;
            }
            .head-sect img {
                height: 150px;
            }
            .form-area {
                padding: 1.75rem;
            }
        }
    /* #endregion ====================== */

    /* #region ====== LOCATION ====== */
        #location {
            .head-sect {
                max-width: 80%;
                margin-inline: auto;
            }
            .wrap-location {
                bottom: 3rem;
            }
        }
    /* #endregion ====================== */

}

/* ############## LARGE DESKTOP / MONITOR UP (1440px) ############## */
@media (width >= 90em) {
    /* #region ====== GENERAL ====== */
        :root {
            --max-page: 1920px;
            --content-max: 1280px;
            --main-padding-x: var(--space-3xl);
            --section-padding-y: var(--space-5xl);
        }
        .desc {
            line-height: 1.75;
        }
    /* #endregion ====================== */

    /* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== MAIN HEADER ====== */
        #mainHeader {
            max-height: 1080px;
        }
    /* #endregion ====================== */
   
}

/* ############## TV / ULTRAWIDE UP (1800px) ############## */
@media (width >= 112.5em) {
    /* #region ====== GENERAL ====== */
        :root {
            --content-max: 1480px;
            --main-padding-x: 8rem;
            --section-padding-y: 7.5rem;
        }
    /* #endregion ====================== */

    /* >>>>>>>>>>>>>>>>>>>>>>>>>  INDEX  <<<<<<<<<<<<<<<<<<<<<<<<< */

    /* #region ====== MAIN HEADER ====== */
        #mainHeader {
            min-height: 820px;
        }
    /* #endregion ====================== */

}

/* ############## SUPER ULTRAWIDE (2200px) ############## */
@media (width >= 137.5em) {
    /* #region ====== GENERAL ====== */
        :root {
            --content-max: 1600px;
        }
    /* #endregion ====================== */
}