* {
    font-family: 'Poppins';
    font-size: 14px;
}

@media (max-width: 1200) {
    * {
        font-size: 12px;
    }
}

:root {
    --fs-heading : 3rem;
    --lh-heading: 5rem;

    --fs-sub-heading : 1.5rem;
    --lh-sub-heading: 2rem;

    --cc-super-dark: 0, 0, 0;
    --cc-dark: 56, 56, 56;
    --cc-grey: 117, 117, 117;
    --cc-lightgrey: 170, 170, 170;
    --cc-green: 0, 162, 105;
    --cc-orange: 255, 122, 0;
    --cc-yellow: 255, 206, 22;
    --cc-light: 255, 255, 255;

    --filter-icon-orange: invert(62%) sepia(63%) saturate(3917%) hue-rotate(357deg) brightness(96%) contrast(111%);
    --filter-icon-light: invert(100%) sepia(100%) saturate(0%) hue-rotate(339deg) brightness(105%) contrast(101%);
}

body {
    background-color:rgb(var(--cc-light));
}

body[data-aos-duration='3500'] [data-aos],
  [data-aos][data-aos][data-aos-duration='3500'] {
    transition-duration: 3500ms;
}

body[data-aos-delay='3500'] [data-aos],
  [data-aos][data-aos][data-aos-delay='3500'] {
    transition-delay: 3500ms;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    background-color: rgb(var(--cc-light));
    transition: 1s;
    z-index: 999;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
}

#loading .loading-container {
    position: relative;
    display: inline-block;

    width: 75px;
}

#loading .loading-container img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);

    width: 100%;
    height: 100%;
    object-fit: contain;
}

#loading .loading-container:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-size: cover;
    background-image: url(../img/logo/favicon.svg);
    background-position: top right;

    animation-name: animateLoading;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes animateLoading {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}

#loading.hide {
    opacity: 0;
    transition: .5s;
}

.text-dark {
    color: rgb(var(--cc-dark));
}

.text-green {
    color: rgb(var(--cc-green));
}

.text-orange {
    color: rgb(var(--cc-orange));
}

.text-yellow {
    color: rgb(var(--cc-yellow));
}

.btn-orange-outline {
    border: 1px solid rgb(var(--cc-orange));
    border-radius: 1.75rem;

    padding: 1rem 2.5rem;

    color: rgb(var(--cc-dark));
    font-size: 1rem;
    font-weight: 700;
}

.btn-orange-outline.active, .btn-orange-outline:hover {
    background-color: rgb(var(--cc-orange));
    border: 0px;

    color: rgb(var(--cc-light));
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#comingSoon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 100vh;
    padding-top: 2rem;
    text-align: center;
}

#comingSoon .inner-content {
    position: relative;
    z-index: 255;
}

#comingSoon .title,
#comingSoon .subtitle,
#comingSoon .social-media {
    opacity: 0;
}

#comingSoon .title * {
    margin-right: .5rem;

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: var(--lh-heading);
}

#comingSoon .title *:last-child {
    margin-right: 0px;
}

#comingSoon .subtitle {
    max-width: 50vw;
    margin: 0 auto;

    font-size: var(--fs-sub-heading);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: var(--lh-sub-heading);
}

#comingSoon .subtitle::after {
    display: block;
    background-color: rgb(var(--cc-dark));
    content: '';
    width: 35%;
    height: 1px;
    margin: 1.5rem auto;
}

#comingSoon .social-media ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 225px;
    margin: 0 auto;
    padding-inline-start: 0px;
}

#comingSoon .social-media ul li {
    width: 2rem;
    height: 2rem;
    transition: .5s;
}

#comingSoon .social-media ul li:hover {
    transform: translateY(-0.5rem);
    transition: .5s;
}

/* NAVBAR & NAVIGATION */
nav {
    position: fixed;
    top: 0px;
    z-index: 255;

    background-color: transparent;
    width: 100%;
    padding: 2rem 0;
    transition: box-shadow 200ms linear;
}

nav.scrolled {
    background-color: rgb(var(--cc-light)) !important;
    box-shadow: 0 5px 25px 0 rgba(0,0,0,.2);
    transition: box-shadow 200ms linear;
}

nav .navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 50px;
}

nav .navbar-container .navbar-logo {
    display: block;
    width: 125px;
}

nav .navbar-container .navbar-links {
    display: flex;
    align-items: center;

    margin-bottom: 0px;
    list-style: none;
    padding-inline-start: 0px;
}

nav .navbar-container .navbar-links li {
    padding: 0 .5rem;
}

nav .navbar-container .navbar-links li:first-child {
    padding-left: 0px;
}

nav .navbar-container .navbar-links li:last-child {
    padding-right: 0px;
}

nav .navbar-container .navbar-links li a {
    color: rgb(var(--cc-super-dark));
    text-decoration: none;
}

nav .navbar-container .navbar-links li a.active {
    font-weight: 600;
}

#mainBanner {
    height: 100vh;
}

.page-navigation {
    position: fixed;
    top: 100px;
    right: 50px;
    z-index: 255;
}

.page-navigation ul {
    list-style: none;
    padding-inline-start: 0px;
}

.page-navigation ul li.page-navigation-item a {
    border: 1px solid rgb(var(--cc-dark));
    border-radius: 50%;

    display: block;
    width: 1rem;
    height: 1rem;
    margin-bottom: 1rem;
}

.page-navigation ul li.page-navigation-item a.active {
    background-color: rgb(var(--cc-green));
    border: 0px;
    transition: background-color 300ms linear;
}

.page-navigation ul li.page-navigation-item:last-child {
    margin-bottom: 0px;
}
/* NAVBAR & NAVIGATION */

/* BANNER @ LANDING PAGE */
#mainBanner {
    position: relative;
}

#mainBanner .social-media-container {
    position: absolute;
    top: 85px;
    left: 50px;
    z-index: 99;
}

#mainBanner .social-media-container .social-media {
    list-style: none;
    padding-inline-start: 0px;
}

#mainBanner .social-media-container .social-media li {
    margin: .85rem 0;
}

#mainBanner .social-media-container .social-media .logo-social-media {
    width: 25px;
    height: 25px;
}

.banner-item {
    position: relative;
    height: 100vh;
}

.banner-item .highlight-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    
    width: 100%;
    height: 100px;
}

.banner-item .highlight-area .name {
    display: flex;
    justify-content: space-between;

    width: 65%;
    margin: 0 auto;
}

.banner-item .highlight-area .name.right {
    width: 75%;
    flex-direction: row-reverse;
}

.banner-item .highlight-area .name img {
    width: 25%;
}

.banner-item .highlight-area.orange {
    background-color: rgb(var(--cc-orange));
}

.banner-item .highlight-area.green {
    background-color: rgb(var(--cc-green));
}

.banner-item .highlight-area.yellow {
    background-color: rgb(var(--cc-yellow));
}

.banner-item .highlight-area.black {
    background-color: rgb(var(--cc-dark));
}

.banner-item .house {
    position: relative;
    z-index: 2;

    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

.banner-item .house .address {
    position: absolute;
    top: 15%;
    right: 10%;

    display: flex;
    align-items: flex-start;
    width: max-content;
    text-align: right;
}

.banner-item .house .address .icon-pinpoint {
    width: 25px;
    height: 25px;
    margin-right: .5rem;
}

.banner-item .house .expandable-amenities {
    position: absolute;
}

.banner-item .house .expandable-amenities.expandable-amenities-rumah_tumbuh-dapur {
    top: 20%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-rumah_tumbuh-kamar_tidur {
    top: 35%;
    right: 16%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-rumah_tumbuh-ruang_tunggu {
    top: 55%;
    left: 33%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-kosshaya-kamar_tidur {
    top: 20%;
    left: 35%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-kosshaya-ruang_tunggu {
    bottom: 10%;
    right: 10%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-kosshaya-ruang_komunal {
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-kosaku-kamar_tidur {
    top: 20%;
    left: 32.5%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-kosaku-ruang_tunggu {
    bottom: 10%;
    right: 10%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-kosaku-ruang_komunal {
    bottom: 25%;
    left: 30%;
    transform: translateX(-50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-keys-kost-kamar_tidur {
    top: 3%;
    left: 30%;
    transform: translateX(-50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-keys-kost-dapur {
    top: 40%;
    right: 18%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-keys-kost-ruang_komunal {
    bottom: 30%;
    left: 40%;
    transform: translateX(-50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-ohayo-kamar_tidur {
    top: 0%;
    left: 30%;
    transform: translateX(-50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-ohayo-lift {
    top: 25%;
    right: 15%;
    transform: translateX(-50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-ohayo-ruang_komunal {
    bottom: 25%;
    left: 35%;
    transform: translateX(-50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-rumah_tumbuh_regentown-dapur {
    top: 20%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-rumah_tumbuh_regentown-ruang_komunal {
    top:28%;
    right: 10%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-rumah_tumbuh_regentown-ruang_tunggu {
    bottom: 20%;
    left: 40%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-josan-kamar_tidur {
    top: 45%;
    right: 15%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-josan-dapur {
    bottom: 5%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.banner-item .house .expandable-amenities.expandable-amenities-josan-ruang_tunggu {
    top: 20%;
    left: 40%;
    transform: translate(-50%, -50%);
}

.banner-item .banner-footer {
    position: absolute;
    bottom: 0;
    left: 50px;
    z-index: 3;

    padding: 0 0 3rem;
}

.banner-item .banner-footer .facilities {
    width: max-content;
}
/* BANNER @ LANDING PAGE */

/* ABOUT @ LANDING PAGE */
#aboutSection {
    background-image: url(../img/about/bg-main.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 100vh;
    padding: 100px 0;
}

#aboutSection .about-us-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#aboutSection .about-us-content .title {
    width: 35%;
    max-width: 175px;
    margin: 0 auto 2rem;
}

#aboutSection .about-us-content .description {
    width: 75%;
    margin: 0 auto;

    color: rgb(var(--cc-dark));
    text-align: center;
}
/* ABOUT @ LANDING PAGE */

/* ADVANTAGE @ LANDING PAGE */
#advantagesSection {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 80vh;
}

#advantagesSection .advatages-container .header {
    margin-bottom: 3.5rem;
    padding-top: 100px;
    text-align: center;
}

#advantagesSection .advatages-container .header .title {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;
}

#advantagesSection .advatages-container .header .title span, 
#advantagesSection .advatages-container .header .title strong {
    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    letter-spacing: 5px;
}

#advantagesSection .advatages-container .header .title .title-logo {
    height: 2.5rem;
}

#advantagesSection .advatages-container .header .subtitle, 
#advantagesSection .advatages-container .header .subtitle strong {
    font-size: 1.25rem;
}

#advantagesSection .advatages-container .content {
    position: relative;
    background-image: url(../img/advantages/bg-main.png);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;

    height: 65vh;
}

#advantagesSection .advatages-container .content .content-detail {
    position: absolute;
    width: 250px;
}

#advantagesSection .advatages-container .content .content-detail .title {
    position: relative;
    font-weight: 600;
}

#advantagesSection .advatages-container .content .content-detail .title::after {
    position: absolute;
    top: 7px;
    right: -15px;

    background-color: #00A269;
    border: 1px solid #00A269;
    border-radius: 100%;
    content: '';
    width: 7px;
    height: 7px;
}

#advantagesSection .advatages-container .content .content-detail:nth-child(even) .title::after {
    right: unset;
    left: -15px;
}

#advantagesSection .advatages-container .content .content-detail .description {
    font-size: 0.75rem;
}

#advantagesSection .advatages-container .content .content-detail:first-child {
    top: 0px;
    right: 60%;
    
    text-align: right;
}

#advantagesSection .advatages-container .content .content-detail:nth-child(2) {
    top: 0px;
    left: 60%;
    
    text-align: left;
}

#advantagesSection .advatages-container .content .content-detail:nth-child(3) {
    top: 150px;
    right: 70%;
    
    text-align: right;
}

#advantagesSection .advatages-container .content .content-detail:nth-child(4) {
    top: 150px;
    left: 70%;
    
    text-align: left;
}

#advantagesSection .advatages-container .content .content-detail:nth-child(5) {
    top: 300px;
    right: 80%;
    
    text-align: right;
}

#advantagesSection .advatages-container .content .content-detail:nth-child(6) {
    top: 300px;
    left: 80%;
    
    text-align: left;
}

@media (max-width: 992px) {
    #advantagesSection .advatages-container .header .title {
        display: flex;
        flex-direction: column;
    }

    #advantagesSection .advatages-container .header .title span, 
    #advantagesSection .advatages-container .header .title strong {
        font-size: 1.75rem;
    }
}
/* ADVANTAGE @ LANDING PAGE */

/* HOW TO BOOK @ LANDING PAGE */
#howToBookSection {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100vh;
    padding-top: 5rem;
}

#howToBookSection .header {
    margin-bottom: 5rem;
    text-align: center;
}

#howToBookSection .header .title, 
#howToBookSection .header .title strong {
    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    letter-spacing: 5px;
}

#howToBookSection .header .subtitle, 
#howToBookSection .header .subtitle strong {
    font-size: 1.25rem;
}

.how-to-book {
    display: flex;
    justify-content: center;
    width: 85%;
    margin: 0 auto;
}

.how-to-book .booking-step {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 25%;
}

.how-to-book .booking-step:nth-child(even) {
    margin-top: 200px;
    margin-left: -1rem;
}

.how-to-book .booking-step:nth-child(3) {
    margin-left: -1rem;
}

.how-to-book .booking-step .step {
    width: max-content;
    height: 55px;
    margin-bottom: 1rem;
}

.how-to-book .booking-step .step img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.how-to-book .booking-step .content {
    display: flex;
}

.how-to-book .booking-step .content .description {
    position: relative;
    width: 65%;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.how-to-book .booking-step:last-child .content .description {
    width: 90%;
}

.how-to-book .booking-step:last-child .content .description::after {
    position: absolute;
    top: 1px;
    right: -4px;
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);

    content: '';
    border: solid black;
    border-width: 0 1px 1px 0;
    width: 3px;
    height: 3px;
    padding: 3px;
}

.how-to-book .booking-step .content .description .title {
    position: relative;
    border-top: dashed 1px rgb(var(--cc-dark));
    height: 1px;
    margin-bottom: 1rem;
}

.how-to-book .booking-step .content .description .title span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    background: rgb(var(--cc-light));
    padding-right: 1rem;

    font-weight: 600;
    line-height: 1.5rem;
}

.how-to-book .booking-step .content .icon {
    position: relative;
    border-top: dashed 1px rgb(var(--cc-dark));
    border-right: dashed 1px rgb(var(--cc-dark));
    border-top-right-radius: 35px;
    width: 35%;
    height: 100px;
}

.how-to-book .booking-step:nth-child(even) .content .icon {
    transform: scaleY(-1);
    margin-top: calc(-3.75rem);
    height: 55px;
}

.how-to-book .booking-step:last-child .content .icon {
    border: 0px;
    width: 10%;
    height: auto;
    margin-top: 0px;
    margin-left: 1rem;
    transform: unset;
}

.how-to-book .booking-step .content .icon::after {
    position: absolute;
    bottom: 0;
    right: -4px;

    content: '';
    border: solid black;
    border-width: 0 1px 1px 0;
    width: 3px;
    height: 3px;
    padding: 3px;

    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.how-to-book .booking-step:last-child .content .icon::after {
    display: none;
}

.how-to-book .booking-step .content .icon span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);

    display: block;
    background: rgb(var(--cc-light));
    padding: 0 .5rem;
}

.how-to-book .booking-step:nth-child(even) .content .icon span {
    transform: translateY(-35%) scaleY(-1);
    padding: 0 0.5rem;
}

.how-to-book .booking-step:last-child .content .icon span {
    transform: translateY(-50%);
}

.how-to-book .booking-step .content .icon span img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.how-to-book .booking-step:last-child .content .icon {
    position: relative;
}

.how-to-book .booking-step:last-child .content .icon .final-icon {
    position: absolute;
    top: -35%;
    left: 0px;
}
/* HOW TO BOOK @ LANDING PAGE */

/* TESTIMONY @ LANDING PAGE */
#testimonySection {
    position: relative;
    background-color: #FAFBFC;
    border-radius: 0px 467px 0px 0px;

    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
}

#testimonySection .header {
    margin-bottom: 3.5rem;
    text-align: center;
}

#testimonySection .header .title, 
#testimonySection .header .title strong {
    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    letter-spacing: 5px;
}

.owl-carousel-testimonies .testimony-item {
    padding: 0 .5rem;
}

.owl-carousel-testimonies .testimony-item .message {
    background-color: rgb(var(--cc-light));
    border-radius: 40px 40px 40px 0px;

    width: 80%;
    height: 175px;
    margin-left: auto;
    padding: 2rem;

    font-size: 0.75rem;
}

.owl-carousel-testimonies .testimony-item.first .message {
    border: 1px solid rgb(var(--cc-green));
}

.owl-carousel-testimonies .testimony-item.second .message {
    border: 1px solid rgb(var(--cc-orange));
}

.owl-carousel-testimonies .testimony-item.third .message {
    border: 1px solid rgb(var(--cc-yellow));
}

.owl-carousel-testimonies .testimony-item .author {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.owl-carousel-testimonies .testimony-item .author .author-img {
    width: 20%;
    height: 75px;
}

.owl-carousel-testimonies .testimony-item .author .author-img img {
    border-radius: 40px 0px 40px 40px;
    object-fit: cover;
}
.owl-carousel-testimonies .testimony-item .author .author-profile {
    width: 75%;
}

.owl-carousel-testimonies .testimony-item .author .author-profile .title {
    font-weight: 600;
}

.owl-carousel-testimonies .testimony-item .author .author-profile .subtitle {
    font-size: 0.75rem;
}

.splide__track {
    margin-bottom: 2rem !important;
}

.splide__pagination {
    position: unset !important;
}

.splide__pagination .splide__pagination__page {
    background: transparent !important;
    border: 1px solid rgb(var(--cc-dark)) !important;
    opacity: 1 !important;
}

.splide__pagination .splide__pagination__page.is-active {
    background-color: rgb(var(--cc-dark)) !important;
    border: 1px solid rgb(var(--cc-dark)) !important;
    transform: scale(1) !important;
}
/* TESTIMONY @ LANDING PAGE */

/* HOUSE */
#houseHeader {
    padding-top: 100px;
    margin-bottom: 5rem;
}

#houseHeader .title,
#houseHeader .title * {
    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    line-height: normal;
    letter-spacing: 2px;
    text-align: center;
}

#houseHeader .content {
    max-width: 35vw;
    margin: 0 auto;
    color: rgb(var(--cc-dark));
    font-size: 1rem;
    line-height: normal;
    text-align: center;
}

#houseCatalog {
    width: 85vw;
    margin: 0 auto;
}

#houseCatalog .catalogs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

#houseCatalog .catalogs .catalog-item {
    width: 33.33%;
    padding: 0 .75rem;
    margin-bottom: 5rem;
}

#houseCatalog .catalogs .catalog-item .header {
    position: relative;
    height: 25px;
}

#houseCatalog .catalogs .catalog-item .header .address {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#houseCatalog .catalogs .catalog-item .header .address .icon-pinpoint {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgb(var(--cc-dark));
    border-radius: 50%;
    width: 30px;
    height: 30px;
    opacity: 0.5;

    cursor: pointer;
}

#houseCatalog .catalogs .catalog-item .header .address .icon-pinpoint:hover,
#houseCatalog .catalogs .catalog-item .header .address .icon-pinpoint:has(+ .content.show)  {
    opacity: 1;
}

#houseCatalog .catalogs .catalog-item .header .address .icon-pinpoint img {
    filter: var(--filter-icon-light);
    width: 20px;
    height: 20px;
}

#houseCatalog .catalogs .catalog-item .header .address .content {
    position: absolute;
    top: -85px;
    left: 50%;
    transform: translateX(-50%);

    background-color: rgb(var(--cc-light));
    border-radius: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.10);

    width: max-content;
    opacity: 0;

    text-align: center;
    transition: .5s;
}

#houseCatalog .catalogs .catalog-item .header .address .content .arrow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;

    background: #fff;

    width: 15px; 
    height: 15px; 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.10);
}

#houseCatalog .catalogs .catalog-item .header .address .content p {
    position: relative;
    z-index: 1;

    background-color: rgb(var(--cc-light));
    border-radius: 10px;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
}

#houseCatalog .catalogs .catalog-item .header .address .content p,
#houseCatalog .catalogs .catalog-item .header .address .content p * {
    font-size: .75rem;
}

#houseCatalog .catalogs .catalog-item .header .address .content.show {
    opacity: 1;
    transition: .5s;
}

#houseCatalog .catalogs .catalog-item .header .title {
    position: relative;
    z-index: 1;

    width: max-content;
    margin: 0 auto;
}

#houseCatalog .catalogs .catalog-item .body {
    position: relative;
    height: 275px;
}

#houseCatalog .catalogs .catalog-item .body .highlight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;

    width: 100%;
    height: 50px;
}

#houseCatalog .catalogs .catalog-item .body .highlight.orange {
    background: rgb(var(--cc-orange));
}

#houseCatalog .catalogs .catalog-item .body .highlight.green {
    background: rgb(var(--cc-green));
}

#houseCatalog .catalogs .catalog-item .body .highlight.yellow {
    background: rgb(var(--cc-yellow));
}

#houseCatalog .catalogs .catalog-item .body .highlight.black {
    background: rgb(var(--cc-dark));
}

#houseCatalog .catalogs .catalog-item .body .house {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#houseCatalog .catalogs .catalog-item .body .house img {
    object-fit: cover;
}

#houseCatalog .catalogs .catalog-item .footer {
    padding-top: 2rem;
    text-align: center;
}

#houseCatalog .catalogs .catalog-item .footer .cta-pelajari_lebih_lanjut {
    border: 1px solid rgb(var(--cc-dark));
    border-radius: 0px 40px 40px 40px;
    width: max-content;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;

    color: rgb(var(--cc-dark));
    font-size: 1.25rem;
    text-decoration: none;
}

#houseCatalog .catalogs .catalog-item .footer .cta-pelajari_lebih_lanjut:hover {
    background-color: rgb(var(--cc-dark));
    color: rgb(var(--cc-light));
}
/* HOUSE */

/* HERO BANNER */
.hero-banner {
    height: 100vh;
}
/* HERO BANNER */

/* ABOUT BANNER */
#aboutBanner {
    background-image: url(../img/about/bg-hero-banner.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

#aboutBanner .about-content {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: center;
}

#aboutBanner .about-content span.header {
    font-size: 1.25rem;
    font-weight: 500;
}

#aboutBanner .about-content span.logo {
    display: block;
    width: 275px;
    margin: 2rem auto;
}
/* ABOUT BANNER */

/* ABOUT VISION */
#visionSection .vision-container {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    width: 70%;
    min-height: 675px;
    margin: 0 auto 3rem;
}

#visionSection .vision-container .title {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: max-content;
    margin-left: 1.5rem;

    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
}

#visionSection .vision-container .title .icon {
    width: 3.5rem;
    transform: rotate(-30deg);
}

#visionSection .vision-container .title .line {
    display: flex;
    margin: 0 5px 5px 0;
}

#visionSection .vision-container .title span {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

#visionSection .vision-container .title .orange {
    color: rgb(var(--cc-orange));
}

#visionSection .vision-container .title .yellow {
    color: rgb(var(--cc-yellow));
}

#visionSection .vision-container .title .green {
    color: rgb(var(--cc-green));
}

#visionSection .vision-container .line-track {
    position: absolute;
    top: 3.75rem;
    right: -3rem;

    width: 500px;
}

#visionSection .vision-container .line-track img {
    width: 95%;
}

#visionSection .vision-value_container {
    padding: 2rem 0;
}

#visionSection .vision-value_container .title {
    width: max-content;
    margin: 0 auto 3rem;

    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

#visionSection .vision-value_container .content,
#visionSection .vision-value_container .content * {
    margin-bottom: 2rem;

    font-size: 1.25rem;
    text-align: center;
}

#visionSection .vision-value_container .vision-values {
    width: 35%;
    margin: 0 auto;
    padding: 0 1rem;
}

#visionSection .vision-value_container .vision-values .vision-value_item {
    position: relative;
}

#visionSection .vision-value_container .vision-values .vision-value_item .content {
    padding-left: 3rem;

    color: rgb(var(--cc-dark));
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
}

#visionSection .vision-value_container .vision-values .vision-value_item .marker {
    position: absolute;
    top: 2px;
    left: 0;

    border-radius: 2.5rem 0 2.5rem 2.5rem;
    width: 2rem;
    height: 2rem;
}

#visionSection .vision-value_container .vision-values .vision-value_item:nth-child(1) .marker {
    background-color: rgb(var(--cc-orange));
}

#visionSection .vision-value_container .vision-values .vision-value_item:nth-child(2) .marker {
    background-color: rgb(var(--cc-yellow));
}

#visionSection .vision-value_container .vision-values .vision-value_item:nth-child(3) .marker {
    background-color: rgb(var(--cc-green));
}
/* ABOUT VISION */

/* ABOUT - MISSION */
#missionSection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#missionSection .mission-container .title {
    width: max-content;
    margin: 0 auto 5rem;

    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.75rem;
    letter-spacing: 2px;
}

#missionSection .content {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    
    width: 100%;
    margin: 0 auto;
}

#missionSection .content .mission-description {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgb(var(--cc-dark));
    border-radius: 40px 40px 40px 0px;
    width: 25%;
    height: 190px;
    padding: 0px 1.5rem;
    
    text-align: center;
}

#missionSection .content .mission-description h4 {
    font-size: 1.25rem;
}

#missionSection .content .mission-description p {
    margin-bottom: 0px;
}

#missionSection .content .mission-description .line-left,
#missionSection .content .mission-description .line-right {
    position: absolute;
}

#missionSection .content .mission-description .line-left {
    right: -50%;
    content: url(../img/img-arrow_mission.svg);
    width: 50%;
}

#missionSection .content .mission-description .line-right {
    left: -50%;

    transform: scaleX(-1);
    content: url(../img/img-arrow_mission.svg);
    width: 50%;
}

#missionSection .content .mission-ornament {
    width: 15%;
}
/* ABOUT - MISSION */

/* ABOUT - VALUES */
#valuesSection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#valuesSection .values-container {
    position: relative;
}

#valuesSection .values-container .title {
    width: max-content;
    margin: 0 auto 5rem;
    
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.75rem;
    letter-spacing: .5rem;
}

#valuesSection .values-container .values {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-image: url(../img/logo/favicon.svg);
    background-size: 350px 350px;
    background-position: center;
    background-repeat: no-repeat;

    width: 50%;
    height: 350px;
    margin: 0 auto;
}

#valuesSection .values-container .values .value {
    position: relative;
    width: 50%;
}

#valuesSection .values-container .values .value .value-container {
    position: absolute;
}

#valuesSection .values-container .values .value .content {
    position: relative;

    width: max-content;
    text-align: right;
}

#valuesSection .values-container .values .value .content .icon {
    position: absolute;

    width: 135px;
    height: 135px;
}

#valuesSection .values-container .values .value .content .title {
    width: auto;
    margin: 0;

    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1px;
    text-align: right;
}

#valuesSection .values-container .values .value .content .description {
    font-size: 1rem;
}

#valuesSection .values-container .values .value.value-social .value-container {
    top: 2rem;
    left: -2rem;
}

#valuesSection .values-container .values .value.value-social .icon {
    background-color: rgb(var(--cc-green));
    border-radius: 50% 50% 0 50%;
}

#valuesSection .values-container .values .value.value-social .title {
    color: rgb(var(--cc-green));
}

#valuesSection .values-container .values .value.value-safety .value-container {
    bottom: -4rem;
    left: 3rem;
}

#valuesSection .values-container .values .value.value-safety .icon {
    background-color: rgb(var(--cc-orange));
    border-radius: 50% 50% 0 50%;
}

#valuesSection .values-container .values .value.value-social .icon,
#valuesSection .values-container .values .value.value-safety .icon {
    top: -110px;
    left: -150px;
}

#valuesSection .values-container .values .value.value-safety .title {
    color: rgb(var(--cc-orange));
}

#valuesSection .values-container .values .value.value-smart .value-container {
    top: -1rem;
    right: 6rem;
}

#valuesSection .values-container .values .value.value-smart .content,
#valuesSection .values-container .values .value.value-service .content {
    margin-left: 0px;
    margin-right: -.5rem;
}

#valuesSection .values-container .values .value.value-smart .content,
#valuesSection .values-container .values .value.value-smart .content .title,
#valuesSection .values-container .values .value.value-service .content,
#valuesSection .values-container .values .value.value-service .content .title {
    text-align: left;
}

#valuesSection .values-container .values .value.value-smart .icon {
    background-color: rgb(var(--cc-dark));
    border-radius: 50% 50% 50% 0;
}

#valuesSection .values-container .values .value.value-smart .title {
    color: rgb(var(--cc-dark));
}

#valuesSection .values-container .values .value.value-service .value-container {
    top: -1rem;
    right: 0rem;
}

#valuesSection .values-container .values .value.value-service .icon {
    background-color: rgb(var(--cc-yellow));
    border-radius: 50% 50% 50% 0;
}

#valuesSection .values-container .values .value.value-service .title {
    color: rgb(var(--cc-yellow));
}

#valuesSection .values-container .values .value.value-smart .icon,
#valuesSection .values-container .values .value.value-service .icon {
    top: -110px;
    right: -150px;
}
/* ABOUT - VALUES */

/* ABOUT - TIMELINE */
#timelineSection {
    min-height: 100vh;
    padding: 5rem 0 7rem;
}

#timelineSection .title {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 3.5rem;
}

#timelineSection .title span {
    margin-right: .5rem;
    padding-top: .5rem;

    font-size: 2.5rem;
    line-height: 3.75rem;
    letter-spacing: .5rem;
}

#timelineSection .title .title-logo {
    height: 2.5rem;
}

.owl-carousel-timelines .timeline-item {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.owl-carousel-timelines .timeline-item .timeline-featured_image {
    border-radius: 30px 30px 30px 0;
    width: 100%;
    height: 275px;
    margin-bottom: 1.5rem;
}

.owl-carousel-timelines .timeline-item .timeline-featured_image img {
    border-radius: 30px 30px 30px 0;
    object-fit: cover;
}

.owl-carousel-timelines .timeline-item .timeline-title {
    margin-bottom: 1.75rem;

    color: rgb(var(--cc-dark));
    font-size: 1.5rem;
    font-weight: 600;
}
/* ABOUT - TIMELINE */

/* COMMUNITY COMING SOON */
#communityBanner {
    padding-top: 100px;
}

#comingSoonCommunity {
    margin-top: -100px;
    margin-bottom: 100px;
}

#comingSoonCommunity .title {
    width: max-content;
    margin: 0 auto;
}

#comingSoonCommunity .title span {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 3px;
}

#comingSoonCommunity .title span.green {
    color: rgb(var(--cc-green));
}

#comingSoonCommunity .title span.orange {
    color: rgb(var(--cc-orange));
}

#comingSoonCommunity .subtitle {
    font-size: 1.25rem;
    letter-spacing: 1.5px;
    text-align: center;
}

#comingSoonCommunity .divider {
    background: rgb(var(--cc-dark));
    width: 200px;
    height: 1px;
    margin: 1.5rem auto;
}

#comingSoonCommunity .social-media-container {
    margin: 0 auto;
    width: max-content;
}

#comingSoonCommunity .social-media-container .social-media {
    display: flex;
    list-style: none;
    padding-inline-start: 0px;
}

#comingSoonCommunity .social-media-container .social-media li {
    padding: 0 .5rem;
}

#comingSoonCommunity .social-media-container .social-media .logo-social-media {
    width: 25px;
    height: 25px;
}
/* COMMUNITY COMING SOON */

/* LANDLORD BANNER */
#landlordBanner {
    position: relative;
    padding-top: 100px;
    padding-bottom: 5rem;
}

#landlordBanner .banner-content {
    position: absolute;
    top: 0px;
    left: 300px;

    background: url(../img/landlord/bg-banner_content.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 500px;
    height: 100%;
    padding: 275px 2rem;
}

#landlordBanner .banner-content .title {
    margin-bottom: 1rem;

    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    font-weight: 400;
}

#landlordBanner .banner-content .title span {
    font-size: 2.5rem;
    font-weight: 700;
}

#landlordBanner .banner-content .title span.green {
    color: rgb(var(--cc-green));
}

#landlordBanner .banner-content .title span.orange {
    color: rgb(var(--cc-orange));
}

#landlordBanner .banner-content .shortdesc {
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
}

#landlordBanner .banner-content .btn-landlord-cta {
    display: flex;
}

#landlordBanner .banner-content .btn-landlord-cta .btn {
    border-radius: 25px;
    padding-top: .5rem;
    padding-bottom: .5rem;

    font-size: 1rem;
    font-weight: 700;
}

#landlordBanner .banner-content .btn-landlord-cta .btn-registration {
    background-color: rgb(var(--cc-orange));
    margin-right: 1rem;

    color: rgb(var(--cc-light));
}

#landlordBanner .banner-content .btn-landlord-cta .btn-consultation {
    display: flex;
    align-items: center;
    background-color: rgb(var(--cc-green));
    width: max-content;

    color: rgb(var(--cc-light));
}

#landlordBanner .banner-content .btn-landlord-cta .btn-consultation span {
    width: 20px;
    height: 20px;
    margin-top: -5px;
    margin-right: .5rem;
}
/* LANDLORD BANNER */

/* LANDLORD ADVANTAGES */
#landlordAdvantages {
    padding: 5rem 0;
}

#landlordAdvantages .title {
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin-bottom: 3rem;
}

#landlordAdvantages .title span,
#landlordAdvantages .title strong {
    font-size: 2.5rem;
}

#landlordAdvantages .title .title-logo {
    height: 2.5rem;
    margin-left: 1rem;
}

#landlordAdvantages .landlord-advantages {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 auto;
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 40px 40px 40px 0;

    width: 30%;
    margin-bottom: 2rem;
    padding: 2rem;

    color: rgb(var(--cc-light));
    text-align: center;
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item .title {
    margin-bottom: 0px;
    font-size: 1.125rem;
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item .value {
    font-size: 2.5rem;
    font-weight: 700;
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item .content {
    font-size: 1.5rem;
    font-weight: 700;
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item .content span {
    font-size: 1.5rem;
    font-weight: 400;
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item.green {
    background-color: rgb(var(--cc-green));
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item.orange {
    background-color: rgb(var(--cc-orange));
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item.yellow {
    background-color: rgb(var(--cc-yellow));
    color: rgb(var(--cc-dark));
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item.green-outline {
    border: 1px solid rgb(var(--cc-green));
    color: rgb(var(--cc-dark));
}

#landlordAdvantages .landlord-advantages .landlord-advantages-item .landlord-advantages-cta {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);

    background-color: rgb(var(--cc-green));
    border-radius: 25px;

    width: max-content;
    padding: 5px 2rem;
    color: rgb(var(--cc-light));
    text-decoration: none;
}
/* LANDLORD ADVANTAGES */

/* LANDLORD COMPARISON */
#comparisonSection {
    padding: 10rem 0;
}

#comparisonSection .title {
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin-bottom: 4.5rem;
}

#comparisonSection .title span,
#comparisonSection .title strong {
    font-size: 2.5rem;
}

#comparisonSection .title .title-logo {
    height: 2.5rem;
    margin-left: 1rem;
}

#comparisonSection .comparisons-table {
    position: relative;
    border: 1px solid rgb(var(--cc-dark));
    border-radius: 40px;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.12);

    width: 50vw;
    margin: 0 auto;
    padding: 3rem 2.5rem 2rem;
}

#comparisonSection .comparisons-table .comparisons-header {
    position: absolute;
    top: -20px;
    left: 0px;

    display: flex;
    justify-content: space-between;

    width: 100%;
    height: 50px;
    padding: 0 2.5rem;
}

#comparisonSection .comparisons-table .comparisons-header .value {
    width: 55%;
}

#comparisonSection .comparisons-table .comparisons-header .kompetitor {
    background-color: #D9D9D9;
    border-radius: 0 25px 25px 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    padding: .5rem 2rem;

    color: rgb(var(--cc-dark));
    font-size: 1.125rem;
    font-weight: 700;
}

#comparisonSection .comparisons-table .comparisons-header .beeliv {
    background-color: rgb(var(--cc-orange));
    border-radius: 0 25px 25px 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    padding: .5rem 2rem;
}

#comparisonSection .comparisons-table .comparisons-header .beeliv img {
    width: 75%;
    margin: 0 auto;
}


#comparisonSection .comparisons-table .comparisons-row {
    display: flex;
    justify-content: space-between;

    padding: .5rem 0;
}

#comparisonSection .comparisons-table .comparisons-column {
    width: 20%;
    text-align: center;
}

#comparisonSection .comparisons-table .comparisons-column:first-of-type {
    width: 55%;
    text-align: left;
}

#comparisonSection .comparisons-table .comparisons-column img {
    width: 15px;
    height: 15px;
}
/* LANDLORD COMPARISON */

/* LANDLORD STEPS */
#landlordSteps {
    padding: 5rem 0;
}

#landlordSteps .title {
    display: flex;
    align-items: center;
    justify-content: center;
}

#landlordSteps .title span,
#landlordSteps .title strong {
    font-size: 2.5rem;
}

#landlordSteps .title .title-logo {
    height: 2.5rem;
    margin-left: 1rem;
}

#landlordSteps .subtitle {
    margin-bottom: 5rem;

    font-size: 1.25rem;
    text-align: center;
}

#landlordSteps .landlord-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 80%;
    margin: 0 auto;
    padding: 3rem 0;
}

#landlordSteps .landlord-steps .step {
    position: relative;
    width: 20%;
    padding-right: 2rem;
}

#landlordSteps .landlord-steps .step .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-bottom: 1rem;
}

#landlordSteps .landlord-steps .step .header .number {
    width: 100%;
    max-width: 20%;
    height: 55px;
}

#landlordSteps .landlord-steps .step:last-of-type .header .number {
    max-width: 15%;
}

#landlordSteps .landlord-steps .step .header .arrow {
    position: relative;
    border-top: 1px dashed rgb(var(--cc-dark));

    width: 100%;
    height: 1px;
    margin-left: 2rem;
}

#landlordSteps .landlord-steps .step .header .arrow::after {
    position: absolute;
    top: -4px;
    right: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);

    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    content: '';
    width: 8px;
    height: 8px;
}

#landlordSteps .landlord-steps .step:first-of-type .header .arrow,
#landlordSteps .landlord-steps .step:last-of-type .header .arrow {
    margin-left: 1rem;
}

#landlordSteps .landlord-steps .step:last-of-type .header .arrow {
    margin-right: 1rem;
}

#landlordSteps .landlord-steps .step .header .goals {
    display: contents;
}

#landlordSteps .landlord-steps .step .header .goals img {
    width: 25px;
}

#landlordSteps .landlord-steps .step .icon {
    position: absolute;
    top: -2rem;
    left: 55%;
    transform: translateX(-50%);

    width: 25px;
    height: 25px;
}

#landlordSteps .landlord-steps .step:last-of-type .icon {
    left: unset;
    right: 1rem;
}
/* LANDLORD STEPS */

/* LANDLORD TESTIMONIES */
#landlordTestimonies {
    padding: 10rem 0;
}

#landlordTestimonies .title {
    margin-bottom: 5rem;

    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
}

#landlordTestimonies .title span {
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: inherit;
}

#landlordTestimonies .landlord-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 65%;
    margin: 0 auto;
}

#landlordTestimonies .landlord-item .landlord-content .landlord-message {
    border-radius: 40px 40px 40px 0;

    height: 175px;
    margin-bottom: 2rem;
    padding: 2rem;
}

#landlordTestimonies .landlord-item.first .landlord-content .landlord-message {
    border: 1px solid rgb(var(--cc-green));
}

#landlordTestimonies .landlord-item.second .landlord-content .landlord-message {
    border: 1px solid rgb(var(--cc-orange));
}

#landlordTestimonies .landlord-item.third .landlord-content .landlord-message {
    border: 1px solid rgb(var(--cc-yellow));
}

#landlordTestimonies .landlord-item .landlord-featured_image {
    width: 35%;
}

#landlordTestimonies .landlord-item .landlord-content {
    width: 60%;
}

#landlordTestimonies .landlord-item .landlord-content .landlord-detail .name {
    color: rgb(var(--cc-dark));
    font-size: 1rem;
    font-weight: 600;
}

#landlordTestimonies .landlord-item .landlord-content .landlord-detail .job-title {
    color: rgb(var(--cc-dark));
    font-size: .85rem;
}
/* LANDLORD TESTIMONIES */

/* LANDLORD REGISTRATION BANNER */
#landlordRegistrationBanner {
    background: url(../img/landlord/bg-banner_registration.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;

    height: 90vh;
    padding: 150px 200px;
}

#landlordRegistrationBanner .title {
    margin-bottom: 1rem;

    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2px;
}

#landlordRegistrationBanner .title span {
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: inherit;
}

#landlordRegistrationBanner .title .orange {
    color: rgb(var(--cc-orange));
}

#landlordRegistrationBanner .title .green {
    color: rgb(var(--cc-green));
}

#landlordRegistrationBanner .btn-landlord-cta {
    display: flex;
}

#landlordRegistrationBanner .btn-landlord-cta .btn {
    border-radius: 25px;
    padding-top: .5rem;
    padding-bottom: .5rem;

    font-size: 1rem;
    font-weight: 700;
}

#landlordRegistrationBanner .btn-landlord-cta .btn-registration {
    background-color: rgb(var(--cc-orange));
    margin-right: 1rem;

    color: rgb(var(--cc-light));
}

#landlordRegistrationBanner .btn-landlord-cta .btn-consultation {
    display: flex;
    align-items: center;
    background-color: rgb(var(--cc-green));
    width: max-content;

    color: rgb(var(--cc-light));
}

#landlordRegistrationBanner .btn-landlord-cta .btn-consultation span {
    width: 20px;
    height: 20px;
    margin-top: -5px;
    margin-right: .5rem;
}
/* LANDLORD REGISTRATION BANNER */

/* FAQ BANNER */
#faqBanner {
    padding-top: 100px;
}

#faqBanner .banner {
    position: relative;
}

#faqBanner .banner .title {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
}

#faqBanner .banner .title img {
    width: 85%;
}
/* FAQ BANNER */

/* FAQ CONTENT */
#faqContent {
    padding: 5rem 0;
}

#faqContent .faq-container .faq-header-container {
    width: 100%;
    overflow: auto;
}

#faqContent .faq-container .faq-header-container .faq-header {
    display: flex;
    align-items: center;
    justify-content: center;

    width: max-content;
    margin: 0 auto 3rem;
}

#faqContent .faq-container .faq-header-container .faq-header button.btn-faq-category {
    margin-right: 1rem;
    padding: 6px 15px;
}

#faqContent .faq-container .faq-header-container .faq-header button.btn-faq-category:focus {
    outline: 0px;
    box-shadow: none;
}

#faqContent .faq-container .faq-header-container .faq-header button.btn-faq-category:last-of-type {
    margin-right: 0;
}

#faqContent .faq-container .faq-body {
    width: 650px;
    margin: 0 auto;
}

#faqContent .faq-container .faq-body .faq-content {
    display: none;
    transition: .5s;
}

#faqContent .faq-container .faq-body .faq-content.active {
    display: block;
}

#faqContent .faq-container .faq-body .faq-content .accordion {
    position: relative;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid rgb(var(--cc-dark));
    outline: none;
    width: 100%;
    padding: 1rem 1rem 1rem 0;

    color: #696969;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;

    cursor: pointer;
    transition: 0.4s;
}

#faqContent .faq-container .faq-body .faq-content .accordion * {
    color: #696969;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
}

#faqContent .faq-container .faq-body .faq-content .accordion:last-of-type {
    border: 0px;
}

#faqContent .faq-container .faq-body .faq-content .accordion:after {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);

    content: '';
    background-image: url(../img/icon/icon-chevron_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
}

#faqContent .faq-container .faq-body .faq-content .accordion.active:after {
    transform: translateY(-50%) rotate(180deg);
}

#faqContent .faq-container .faq-body .faq-content .accordion.active, #faqContent .faq-container .faq-body .faq-content .accordion:hover {
    font-size: 1.5rem;
}

#faqContent .faq-container .faq-body .faq-content .panel {
    background-color: transparent;
    max-height: 0;
    padding: 0;

    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

#faqContent .faq-container .faq-body .faq-content .panel .content {
    padding: 1rem 0;
    font-size: 1rem;
}
/* FAQ CONTENT */

/* DETAIL BANNER */
#detailBanner {
    position: relative;
}

#detailBanner .highlight {
    position: absolute;
    top: 100px;
    z-index: 1;;

    width: 100%;
    height: 100px;
    padding-left: 125px;
}

#detailBanner .highlight.orange {
    background: linear-gradient(90deg, #FF7A00 0%, rgba(255, 122, 0, 0.00) 100%);
}

#detailBanner .highlight.yellow {
    background: linear-gradient(90deg, #FFCE16 0%, rgba(255, 206, 22, 0.00) 100%);
}

#detailBanner .highlight.green {
    background: linear-gradient(90deg, #00A269 0%, rgba(0, 162, 105, 0.00) 100%);
}

#detailBanner .highlight.black {
    background: linear-gradient(90deg, #383838 0%, rgba(56, 56, 56, 0.00) 100%);
}

#detailBanner .highlight .name {
    width: max-content;
    max-width: 315px;
}

#detailBanner .highlight.kosshaya .name{
    width: 250px;
    max-width: unset;
    margin-left: 5%;
}

#detailBanner .highlight.kosaku .name {
    width: 200px;
    max-width: unset;
    margin-left: 10%;
}

#detailBanner .highlight.rumah-tumbuh-regentown .name {
    width: 250px;
    max-width: unset;
}

#detailBanner .house {
    position: relative;
    z-index: 2;

    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

#detailBanner .house .accessibility-information {
    position: absolute;
    top: 250px;
    left: 125px;
}

#detailBanner .house .accessibility-information .direction {
    display: flex;
    align-items: center;

    margin-bottom: 2rem;
    cursor: pointer;
}

#detailBanner .house .accessibility-information .direction .icon {
    width: 25px;
    height: 25px;
    margin-right: .5rem;
}

#detailBanner .house .accessibility-information .direction .btn-get-direction {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgb(var(--cc-light));
    border: 2px solid rgb(var(--cc-dark));
    border-radius: 2.5rem;
    padding: .5rem 1rem;
    color: rgb(var(--cc-dark));
    line-height: 0;
    text-decoration: none;
}

#detailBanner .house .accessibility-information .direction .btn-get-direction:hover {
    background-color: rgb(var(--cc-dark));
    color: rgb(var(--cc-light));
}

#detailBanner .house .accessibility-information .direction .btn-get-direction:hover .icon img {
    filter: var(--filter-icon-light);
}

#detailBanner .house .accessibility-information .direction .btn-get-direction .icon {
    width: 15px;
    height: 15px;
    margin-left: .5rem;
}

#detailBanner .house .accessibility-information .title {
    margin-bottom: 1rem;

    color: rgb(var(--cc-dark));
    font-size: 1.5rem;
    font-weight: 600;
    line-height: normal;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility {
    border-radius: 1.5rem;
    margin-bottom: 1rem;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility:only-of-type,
#detailBanner .house .accessibility-information .accessibilities .accessibility:last-of-type {
    margin-bottom: 0px;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .accordion {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    
    color: rgb(var(--cc-light));
    font-size: 1rem;
    font-weight: 600;
    line-height: 0;

    cursor: pointer;
    transition: 0.4s;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .accordion .icon {
    width: 20px;
    height: 20px;
    margin-right: .5rem;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .panel {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.4s ease-out;

    padding: 0 1rem;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .panel .content-information {
    border-radius: 1rem;
    margin-bottom: 1rem;
    padding: 1rem
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .panel .content-information .info {
    border-bottom: 0.5px solid rgb(var(--cc-dark));
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .panel .content-information .info:only-of-type,
#detailBanner .house .accessibility-information .accessibilities .accessibility .panel .content-information .info:last-of-type {
    border: 0px !important;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .panel .content-information .info .title {
    margin-bottom: 0;
    
    font-size: 1rem;
    font-weight: 600;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility .panel .content-information .info .value {
    font-size: 1.5rem;
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-transportation {
    background-color: rgb(var(--cc-orange));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-shopping_center {
    background-color: rgb(var(--cc-yellow));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-health {
    background-color: rgb(var(--cc-green));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-education {
    background-color: rgb(var(--cc-dark));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-office {
    background-color: rgb(var(--cc-light));
    border: 1px solid rgb(var(--cc-dark));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-transportation .panel .content-information,
#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-shopping_center .panel .content-information,
#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility.accessibility-health .panel .content-information,
#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility.accessibility-education .panel .content-information {
    background-color: rgb(var(--cc-light));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility.accessibility-office .panel .content-information {
    background-color: rgb(var(--cc-dark));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-shopping_center .accordion,
#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-office .accordion {
    color: rgb(var(--cc-dark));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-office .panel .content-information .info .title,
#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-office .panel .content-information .info .value {
    color: rgb(var(--cc-light));
}

#detailBanner .house .accessibility-information .accessibilities .accessibility.accessibility-office .panel .content-information .info {
    border-bottom: 1px solid rgb(var(--cc-light));
}

#detailBanner .house .description {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);

    background-color: rgb(var(--cc-light));
    border-radius: 2rem;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    padding: 2rem;

    color: rgb(var(--cc-dark));
    font-size: .85rem;
    text-align: center;
}

#detailBanner .house .galleries {
    position: absolute;
    top: 250px;
    right: 125px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    width: 225px;
}

#detailBanner .house .galleries .gallery {
    margin-bottom: 1rem;
    height: 150px;
    cursor: pointer;
}

#detailBanner .house .galleries .gallery img {
    object-fit: cover;
}

#detailBanner .house .galleries .gallery img {
    border-radius: 50px 50px 50px 0px;
}

#detailBanner .house .galleries .gallery:nth-child(2) img {
    border-radius: 35px 35px 35px 0px;
}

#detailBanner .house .galleries .gallery:nth-child(3) img {
    border-radius: 35px 35px 0px 35px;
}

#detailBanner .house .galleries .gallery:last-of-type {
    margin-bottom: 0;
}

#detailBanner .house .galleries .gallery.landscape {
    width: 100%;
}

#detailBanner .house .galleries .gallery.portrait {
    width: 45%;
}
/* DETAIL BANNER */

/* DETAIL FACILITY SERVICE */
#facilityServices {
    background: #FBFBFB;
    padding: 3rem;
}

#facilityServices .header {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 3rem;
}

#facilityServices .header .menu {
    padding: 0 1rem;

    color: #9D9D9D;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

#facilityServices .header .menu:first-of-type {
    border-right: 0.5px solid rgb(var(--cc-dark));
}

#facilityServices .header .menu.active {
    font-size: 2rem;
}

#facilityServices .header .menu.facility.active {
    color: rgb(var(--cc-orange));
}

#facilityServices .header .menu.service.active {
    color: rgb(var(--cc-green));
}

#facilityServices .facility-service-items {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    margin: 0 auto 0 3rem;
}

#facilityServices #serviceSection .facility-service-items {
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#facilityServices .facility-service-items .left-col,
#facilityServices .facility-service-items .right-col {
    width: 50%;
}

#facilityServices #serviceSection .facility-service-items .left-col,
#facilityServices #serviceSection .facility-service-items .right-col {
    width: auto;
}

#facilityServices .facility-service-items .item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;

    max-width: 375px;
    font-size: 1.25rem;
}

#facilityServices .facility-service-items .item:last-of-type {
    margin-bottom: 0px;
}

#facilityServices .facility-service-items .item .icon,
#facilityServices .facility-service-items .item .icon img {
    width: 1.25rem;
    height: 1.25rem;
}

#facilityServices .facility-service-items .item .icon {
    margin-right: .5rem;
}

#facilityServices .facility-services-content {
    display: none;
}

#facilityServices .facility-services-content.active {
    display: block;
}
/* DETAIL FACILITY SERVICE */

/* DETAIL PUBLIC FACILITY */
#publicFacilities {
    padding: 5rem 0;
}

#publicFacilities .title {
    width: max-content;
    margin: 0 auto 3rem;

    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

#publicFacilities .description {
    margin-bottom: 3rem;
    color: rgb(var(--cc-dark));
    font-size: 1rem;
    text-align: center;
}

#publicFacilities  .owl-carousel-public-facilities-items .public-facilities-item {
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

#publicFacilities  .owl-carousel-public-facilities-items .public-facilities-item img {
    border-radius: 50px 50px 50px 0px;
    object-fit: cover;
    object-position: bottom;
}
/* DETAIL PUBLIC FACILITY */

/* DETAIL ROOM TYPE */
#roomType {
    padding: 5rem 0;
}

#roomType .title {
    width: max-content;
    margin: 0 auto 3rem;

    color: rgb(var(--cc-dark));
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

#roomType #splideRoomType .room-types {
    width: 100%;
    padding: 1rem;
}

#roomType #splideRoomType .room-types .room-type-item {
    background-color: rgb(var(--cc-light));
    border-radius: 35px;
    box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.11);
    
    padding: 0 0 1rem 0;
}

#roomType #splideRoomType .room-types .room-type-item .featured-image {
    position: relative;
    height: 183px;
    cursor: pointer;
}

#roomType #splideRoomType .room-types .room-type-item .featured-image::after {
    position: absolute;
    top: 20px;
    right: 20px;

    /* display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(128, 128, 128, .7);
    border-radius: 50%; */

    width: 35px;
    height: 35px;
    content: url(../img/icon/icon-magnify_plus.svg?v=1);
}

#roomType #splideRoomType .room-types .room-type-item .featured-image img {
    border-radius: 35px 35px 0px 35px;
    object-fit: cover;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail {
    padding: 1rem 1.5rem;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .title {
    margin: unset;
    margin-bottom: .5rem;
    
    font-size: 1.25rem;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .title.room-name {
    height: 45px;
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications {
    margin-bottom: 1rem;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item:last-child {
    margin-bottom: 0;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .icon {
    display: flex;
    align-items: flex-start;
    width: 16px;
    height: 16px;
    margin-right: .5rem;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .icon img {
    width: 15px;
    height: 15px;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .value,
#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .value * {
    color: rgb(var(--cc-grey));
    font-size: 15px;
    line-height: 1;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .value span {
    font-size: 12px;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .value strong {
    font-weight: 600;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .value .unit {
    position: relative;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .specifications .specification-item .value .unit small {
    position: absolute;
    top: 0;
    font-size: 10px;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .facilities {
    border-bottom: 1px solid rgb(var(--cc-dark));
    height: 155px;
    padding-bottom: 1.5rem;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .facilities .title {
    margin: unset;
    margin-bottom: .5rem;

    color: rgb(var(--cc-lightgrey));
    font-size: 1.25rem;
    font-weight: 600;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .facilities ul {
    padding-inline-start: 20px;
    list-style: disc;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .facilities ul li {
    padding-left: 5px;
    color: rgb(var(--cc-grey));
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .price {
    margin: 1rem 0;
    color: rgb(Var(--cc-dark));
    font-size: 2rem;
    font-weight: 700;
    line-height: normal;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .price .subtitle {
    font-size: calc(1rem - 2px);
    font-style: italic;
    line-height: normal;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .price span {
    color: rgb(var(--cc-orange));
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
}

#roomType #splideRoomType .room-types .room-type-item .room-detail .btn-contact-wa {
    background-color: rgb(var(--cc-green));
    border-radius: 2rem;

    width: 100%;
    padding: .85rem 0;

    color: rgb(var(--cc-light));
    font-weight: 700;
}
/* DETAIL ROOM TYPE */

/* DETAIL LOCATION */
#location {
    padding: 3rem 0 10rem;
}

#location .title {
    width: max-content;
    margin: 0 auto 3rem;

    color: rgb(var(--cc-dark));
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 2px;
}

#location .card {
    border: 0px;
    border-radius: 2.25rem;
    box-shadow: 0px 4px 18px 0px rgba(44, 44, 44, 0.13);
}

#location .card .maps .gmap_iframe {
    border-radius: 2.5rem;
    width: 100%;
    height: 350px;
}

#location .card .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

#location .card .info .address {
    display: flex;
}

#location .card .info .address .icon,
#location .card .info .address .icon img {
    width: 1.5rem;
    height: 1.5rem;
}

#location .card .info .address .icon {
    margin-right: .5rem;
}

#location .card .info .btn-get-direction {
    display: flex;

    background: rgb(var(--cc-orange));
    border-radius: 2rem;

    color: rgb(var(--cc-light));
    font-size: 1rem;
    font-weight: 600;

    cursor: pointer;
}

#location .card .info .btn-get-direction .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .5rem;
}
#location .card .info .btn-get-direction .icon img {
    filter: var(--filter-icon-light);
}

#location .card .info .btn-get-direction:hover {
    background: rgb(var(--cc-light));
    border: 1px solid rgb(var(--cc-orange));

    color: rgb(var(--cc-orange));
}

#location .card .info .btn-get-direction:hover .icon img {
    filter: var(--filter-icon-orange);
}

#location .card .info .btn-get-direction:focus {
    outline: none;
    box-shadow: none;
}
/* DETAIL LOCATION */

/* FLOATING CONTACT US */
.floating-contact-us {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 255;

    background-color: rgb(var(--cc-light));
    border-radius: 18px 18px 50px 50px;
    filter: drop-shadow(1px 4px 9px rgba(0, 0, 0, 0.13));

    padding: 1rem 1rem 5rem;
}

.floating-contact-us a {
    text-decoration: none;
}

.floating-contact-us .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: rgb(var(--cc-dark));
    font-size: .75rem;
    font-weight: 700;
}

.floating-contact-us .content span {
    color: rgb(var(--cc-orange));
    font-size: .75rem;
    font-weight: 700;
}

.floating-contact-us .icon {
    position: absolute;
    bottom: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
/* FLOATING CONTACT US */

/* FOOTER */
footer {
    background-color: #FAFBFC;
}

main:not(:has(#testimonySection)) footer {
    background-color: unset;
}

footer .inner-footer {
    background-color: #00A269;
    border-radius: 65px 65px 0px 0px;

    width: 100%;
    padding: 3rem 0;
}

footer .inner-footer .footer-logo {
    height: 75px;
}

footer .inner-footer .footer-logo img {
    object-position: left;
}

footer #supportChannels {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer #supportChannels .title,
footer .title-link {
    margin-bottom: .5rem;
    color: rgb(var(--cc-light));
    font-weight: 600;
}

footer #supportChannels .support-channels {
    list-style: none;
    padding-inline-start: 0px;
    margin-bottom: 0px;
}

footer #supportChannels .support-channels li a {
    display: flex;
    align-items: center;
    margin-bottom: .5rem;

    color: rgb(var(--cc-light));
    font-size: .75rem;
    text-decoration: none;
}

footer #supportChannels .support-channels li:last-child a {
    margin-bottom: 0px;
}

footer #supportChannels .support-channels a .support-channel-icon {
    display: flex;
    width: 18px;
    height: 18px;
    margin-right: .5rem;
}

footer .title-link {
    text-decoration: none;
}

footer .social-media-channels {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    list-style: none;
    padding-inline-start: 0px;
    margin-bottom: 2rem;
}

footer .social-media-channels li {
    padding: 0 .5rem;
}

footer .social-media-channels li:last-child {
    padding-right: 0;
}

footer .social-media-channels li a {
    display: block;
    width: 25px;
    height: 25px;
}

footer .copyright {
    color: rgb(var(--cc-light));
    font-size: .75rem;
    text-align: right;
}

footer .line-footer {
    display: flex;
}

footer .line-footer .line {
    width: 50%;
    height: 15px;
}

footer .line-footer .line.line-orange {
    left: 0px;
    background-color: #FF7A00;
}

footer .line-footer .line.line-yellow {
    right: 0px;
    background-color: #FFCE16;
}
/* FOOTER */

/* MODAL */
.modal-full-page .modal-content {
    position: relative;
    background: transparent;
    border: 0px;
}

.btn-close-modal {
    position: absolute;
    top: -4rem;
    right: -4rem;
}

.btn-close-modal:focus {
    outline: none;
    box-shadow: none;
}

.btn-close-modal span {
    color: rgb(var(--cc-light));
    font-size: 4.5rem;
    font-weight: 100;
}

.modal-full-page .modal-content .modal-body {
    background: rgb(var(--cc-light));
    border-radius: 35px;
    padding: 0px;
}
/* MODAL */

/* CUSTOM SPLIDE GENERAL */
.splide.is-focus-in .splide__arrow:focus,
.splide__arrow:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.splide__arrow {
    background: none !important;
    opacity: 1 !important;
}

.splide__arrow {
    content: url(../img/icon/icon-arrow_splide.svg) !important;
}

.splide__arrow.splide__arrow--prev {
    transform: translateY(-50%) scaleX(-1);
}

#splideBanners .splide__arrow {
    content: url(../img/icon/icon-arrow_splide_white.svg) !important;
}

#splideBanners .splide__arrow.splide__arrow--prev {
    left: 3em;
}

#splideBanners .splide__arrow.splide__arrow--next {
    right: 3em;
}

#splideRoomType .splide__arrow.splide__arrow--prev {
    left: -3em;
}

#splideRoomType .splide__arrow.splide__arrow--next {
    right: -3em;
}

.preview-gallery .splide__arrow {
    background: #FFF !important;
    padding: 0.5rem;
}

.preview-gallery .splide__arrow.splide__arrow--prev {
    left: -3.5em;
}

.preview-gallery .splide__arrow.splide__arrow--next {
    right: -3.5em;
}
/* CUSTOM SPLIDE GENERAL */

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.4);
    border-radius: 10rem;
    border: 1px solid #fff;
}

::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent;
}
/* CUSTOM SCROLLBAR */