/*
Theme Name: BaliHostra
Theme URI: https://balihostra.com
Author: @blidodi
Author URI: https://blidodi.com
Description: Custom WordPress Theme untuk Villa Management & Marketing Solutions di Bali.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: balihostra
Tags: luxury, villa-management, hospitality, custom-menu, theme-options
*/

/* ==========================================
   BALIHOSTRA - CUSTOM THEME STYLESHEET
   ========================================== */

/* 1. Global Reset & Variables */
:root{

--dark:#1D1D23;
--dark-light:#25252D;

--navy:#1F536E;
--sky:#7CA2AF;

--gold:#D4AB25;
--gold-hover:#E6BD39;

--terracotta:#BF3A24;

--white:#FFFFFF;
--text:#D8D8D8;

--radius:20px;

--transition:.35s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:var(--dark);

color:var(--text);

font-family:'Poppins',sans-serif;

overflow-x:hidden;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

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

h1,h2,h3,h4,h5,h6{

font-family:
'Cormorant Garamond',
serif;

font-weight:600;

color:#fff;

}

h1{
font-size:72px;
line-height:1.05;
}

h2{
font-size:54px;
}

h3{
font-size:38px;
}

p{
line-height:1.8;
color:#bcbcbc;
}

.container{

max-width:1320px;

}

.btn-gold{

background:var(--gold);

color:#fff;

padding:14px 32px;

border-radius:50px;

font-weight:600;

border:none;

transition:var(--transition);

}

.btn-gold:hover{

background:var(--gold-hover);

transform:translateY(-3px);

color:#fff;

}

.btn-outline-gold{

border:1px solid var(--gold);

color:var(--gold);

padding:14px 30px;

border-radius:50px;

transition:var(--transition);

background:transparent;

}

.btn-outline-gold:hover{

background:var(--gold);

color:white;

}

.navbar {
    padding: 25px 0;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.navbar.scrolled {
    /* Hitam dengan transparansi 85% */
    background-color: rgba(17, 17, 22, 0.85) !important; 
    
    /* Efek blur kaca di latar belakang */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    padding: 15px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ===========================
   Navbar
=========================== */

.navbar-brand img{
    height:60px;
}

.nav-link{
    color:#fff !important;
    margin:0 12px;
    font-weight:500;
    position:relative;
    transition:.3s;
}

/* Batasi indikator garis hanya pada level utama navbar */
.navbar .navbar-nav > .nav-item > .nav-link::after {
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0 !important;
    height:2px;
    background:var(--gold);
    transition: width 0.3s ease;
}

.navbar .navbar-nav > .nav-item > .nav-link:hover::after,
.navbar .navbar-nav > .nav-item > .nav-link.active::after {
    width:100% !important;
}


/* ===========================
   Flexible Mega Menu & Clean Vertical Divider (Strict No-Overlap)
=========================== */

.mega-menu{
    position: relative;
}

.mega-menu-content{
    position: absolute;
    top: 120% !important; 
    left: 50%;
    transform: translateX(-50%);
    
    /* Lebar otomatis menyesuaikan konten teks */
    width: max-content !important;
    min-width: 320px;
    max-width: 95vw;
    
    background: #1b1b1b;
    border: 1.5px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 35px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease, top .35s ease;
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
    z-index: 999;
}

/* Mengatur baris agar fleksibel sejajar ke samping */
.mega-menu-content .row {
    display: flex;
    flex-wrap: nowrap;
    margin-right: 0;
    margin-left: 0;
}

/* Setiap kolom diberi ruang minimal dan padding yang aman dari garis */
.mega-menu-content [class*="col-lg-"] {
    position: relative;
    min-width: 220px; 
    padding-left: 30px !important;  
    padding-right: 30px !important; 
    flex: 1 1 auto;
}

/* Menghilangkan padding luar pada kolom pertama dan terakhir */
.mega-menu-content [class*="col-lg-"]:first-child {
    padding-left: 10px !important;
}
.mega-menu-content [class*="col-lg-"]:last-child {
    padding-right: 10px !important;
}

/* Garis pembatas vertikal antar kolom yang bersih di tengah-tengah padding */
.mega-menu-content [class*="col-lg-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 5px;
    width: 1px;
    height: calc(100% - 10px);
    background: rgba(255, 255, 255, 0.15);
}

/* Pengaturan Tautan List Menu */
.mega-menu-content ul li a {
    white-space: nowrap;
    display: block;
    padding: 6px 0;
}

/* Penyesuaian posisi saat navbar mengecil ketika discroll */
.navbar.scrolled .mega-menu-content {
    top: 110% !important;
}

.mega-menu:hover .mega-menu-content{
    opacity: 1;
    visibility: visible;
}

/* Isolasi indikator garis bawah nav-link agar tidak melebar otomatis saat scroll */
.navbar-nav .nav-link {
    position: relative;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
    /* Pastikan pseudo-element garis bawah hanya muncul saat aktif/hover murni */
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gold, #c5a059);
}
/* ===========================
   Heading
=========================== */

.mega-menu-content h6{
    color:var(--gold);
    font-size:17px;
    font-weight:700;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

/* ===========================
   List
=========================== */

.mega-menu-content ul{
    list-style:none;
    margin:0;
    padding:0;
}

.mega-menu-content ul li{
    margin-bottom:6px;
}

.mega-menu-content ul li:last-child{
    margin-bottom:0;
}

.mega-menu-content ul li a{
    display:block;
    color:#d5d5d5;
    text-decoration:none;
    padding:10px 0;
    transition:.3s;
    position:relative;
}

.mega-menu-content ul li a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:0;
    height:2px;
    background:var(--gold);
    transform:translateY(-50%);
    transition:.3s;
}

.mega-menu-content ul li a:hover{
    color:var(--gold);
    padding-left:18px;
}

.mega-menu-content ul li a:hover::before{
    width:10px !important; /* Batasi lebar maksimal garis hanya 10px saat di-hover */
}

/* ===========================
   Column Divider
=========================== */

.mega-menu-content .col-lg-4,
.mega-menu-content .col-lg-6{
    position:relative;
}

.mega-menu-content .col-lg-4:not(:last-child)::after,
.mega-menu-content .col-lg-6:not(:last-child)::after{
    content:"";
    position:absolute;
    right:15px;
    top:0;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.08);
}

/* ===========================
   Button
=========================== */

.btn-gold{
    background:var(--gold);
    color:#111;
    padding:12px 28px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.btn-gold:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(212,175,55,.35);
    color:#111;
}

/* ===========================
   Responsive
=========================== */

@media(max-width:991px){

    .mega-menu-content{
        position:static;
        transform:none;
        width:100%;
        margin-top:15px;
        opacity:1;
        visibility:visible;
        display:none;
        border-radius:15px;
        padding:25px;
    }

    .mega-menu:hover .mega-menu-content{
        display:block;
    }

    .mega-menu-content .col-lg-4::after,
    .mega-menu-content .col-lg-6::after{
        display:none;
    }

    .mega-menu-content .row>div{
        margin-bottom:25px;
    }

    .mega-menu-content .row>div:last-child{
        margin-bottom:0;
    }

    .nav-link{
        margin:8px 0;
    }

}

/* =========================
   MOBILE MENU
========================= */

.mobile-menu{

    background:
    linear-gradient(
        180deg,
        #1D1D23,
        #15151A
    );

    width:320px;

    z-index:1060;

    border-left:
    1px solid rgba(212,171,37,.15);

}

.mobile-menu .offcanvas-header{

    padding:25px;

    border-bottom:
    1px solid rgba(255,255,255,.06);

}
.mobile-brand img{

    height:55px;

}
.mobile-menu .btn-close{

    filter:invert(1);

    opacity:.8;

}
.mobile-menu .btn-close:hover{

    opacity:1;

}
.mobile-nav{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:20px;

}
.mobile-nav li{

    list-style:none;

}
.mobile-nav li a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    border-radius:15px;

    color:white;

    font-weight:500;

    transition:.3s;

}
.mobile-nav li a i{

    width:24px;

    color:var(--gold);

    font-size:18px;

}
.mobile-nav li a:hover{

    background:
    rgba(212,171,37,.08);

    color:var(--gold);

    transform:
    translateX(8px);

}
.mobile-divider{

    height:1px;

    background:
    rgba(255,255,255,.08);

    margin:30px 0;

}
.mobile-contact{

    text-align:center;

}
.mobile-contact small{

    color:#aaa;

    letter-spacing:1px;

    text-transform:uppercase;

}
.mobile-contact .btn-gold{

    border-radius:50px;

    padding:14px 25px;

}

/* ===========================
   Mobile Dropdown
=========================== */

.mobile-dropdown{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.mobile-dropdown>div{
    display:flex;
    align-items:center;
    gap:15px;
}

.mobile-dropdown .arrow{
    width:auto;
    color:#999;
    transition:.3s;
    font-size:13px;
}

/* ketika submenu terbuka */

.mobile-dropdown[aria-expanded="true"] .arrow{
    transform:rotate(180deg);
    color:var(--gold);
}

/* ===========================
   Submenu
=========================== */

.mobile-submenu{
    list-style:none;
    margin:8px 0 12px;
    padding-left:58px;
}

.mobile-submenu li{
    margin-bottom:5px;
}

.mobile-submenu li:last-child{
    margin-bottom:0;
}

.mobile-submenu li a{
    display:block;
    padding:10px 12px;
    color:#cfcfcf;
    font-size:14px;
    border-radius:10px;
    transition:.25s;
}

.mobile-submenu li a:hover{
    background:rgba(212,171,37,.08);
    color:var(--gold);
    padding-left:18px;
}

.hero{
    min-height:100vh;
    position:relative;

    background-image:
    linear-gradient(
        rgba(0,0,0,.6),
        rgba(0,0,0,.4)
    ),
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content{

position:relative;
z-index:2;

max-width:700px;

}

.hero-label{

display:inline-block;

padding:8px 20px;

background:
rgba(212,171,37,.15);

border:
1px solid rgba(212,171,37,.3);

border-radius:30px;

color:var(--gold);

margin-bottom:20px;

}

.hero p{

max-width:550px;

margin:
25px 0 40px;

font-size:18px;

}

/* ==========================================
   PARTNERS SECTION
========================================== */

.partners {
    padding: 90px 0;
    background: #17171d;
}

.partners .container {
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

.partners .section-heading span {
    display: inline-block;
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.partner-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.partner-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-width: 140px;
    height: 70px; 
}

.partner-item img {
    max-width: 100%;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 1;
    filter: none;
    transition: var(--transition);
}

.partner-item:hover img {
    opacity: 1;
    filter: none;
}

.stats{

padding:100px 0;

}

.stat-card{

background:#22232A;

padding:40px;

border-radius:20px;

text-align:center;

border:
1px solid rgba(255,255,255,.05);

}

.stat-card h2{

font-size:60px;

color:var(--gold);

}

.stat-card span{

color:#bcbcbc;

}

/* start icon */

.solution-mini,
.solution-mini-light{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

padding:18px 8px;

border-radius:16px;

text-decoration:none;

transition:.3s;

height:100%;

}

.solution-mini{

background:#25252d;

}

.solution-mini-light{

background:#20232b;

}

.solution-mini:hover,
.solution-mini-light:hover{

transform:translateY(-4px);

border:1px solid rgba(212,171,37,.4);

}

.solution-mini .icon,
.solution-mini-light .icon{

width:52px;
height:52px;

border-radius:14px;

display:flex;

align-items:center;
justify-content:center;

background:rgba(212,171,37,.08);

margin-bottom:10px;

}

.solution-mini i,
.solution-mini-light i{

font-size:22px;

color:var(--gold);

}

.solution-mini span,
.solution-mini-light span{

font-size:13px;

font-weight:500;

color:#fff;

text-align:center;

line-height:1.3;

}

@media(max-width:768px){

.row-cols-4>.col{

flex:0 0 25%;

max-width:25%;

}

.solution-mini,
.solution-mini-light{

padding:14px 4px;

}

.solution-mini .icon,
.solution-mini-light .icon{

width:46px;
height:46px;

}

.solution-mini i,
.solution-mini-light i{

font-size:18px;

}

.solution-mini span,
.solution-mini-light span{

font-size:11px;

}

}
/* end icon */

.about-section{

padding:120px 0;

background:#18181F;

}

.about-image{

overflow:hidden;
border-radius:30px;

}

.about-image img{

transition:.6s;

}

.about-image:hover img{

transform:scale(1.05);

}
.about-content{

padding-left:40px;

}

.about-content span{

color:var(--gold);

letter-spacing:3px;

font-size:13px;

text-transform:uppercase;

}

.about-content h2{

margin:20px 0;

}
.about-feature{

margin-top:30px;

display:flex;
flex-direction:column;
gap:18px;

}
.about-feature div{

display:flex;
align-items:center;
gap:12px;

font-weight:500;

}

.about-feature i{

color:var(--gold);

font-size:18px;

}

.why-section{

padding:120px 0;

background:var(--dark);

}
.why-card{

background:#25252D;

padding:40px 30px;

border-radius:25px;

height:100%;

text-align:center;

transition:.4s;

border:1px solid transparent;

}
.why-card:hover{

transform:translateY(-10px);

border-color:rgba(212,171,37,.3);

box-shadow:
0 20px 50px rgba(0,0,0,.35);

}
.why-card .icon{

width:90px;
height:90px;

margin:auto;

border-radius:50%;

background:
rgba(212,171,37,.1);

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

margin-bottom:25px;

}
.why-card i{

font-size:34px;

color:var(--gold);

}
.why-card h4{

margin-bottom:15px;

}

.services-section{

padding:120px 0;

background:#17171D;

}
.service-card{

background:#25252D;

padding:50px 35px;

border-radius:25px;

text-align:center;

height:100%;

transition:.4s;

}
.service-card:hover{

transform:translateY(-12px);

box-shadow:
0 20px 60px rgba(0,0,0,.4);

}
.service-card i{

font-size:48px;

color:var(--gold);

margin-bottom:25px;

}

/* =========================
PROPERTY
========================= */

.property-section{
    padding:120px 0;
    background:var(--dark);
}

.property-slider{
    padding-bottom:70px;
}

.villa-card{
    position:relative;
    background:#25252D;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.05);
    transition:.35s ease;
    height:100%;
}

.villa-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.25);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.villa-card img{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.6s;
    display:block;
}

.villa-card:hover img{
    transform:scale(1.08);
}

.villa-badge{

    position:absolute;

    top:20px;
    left:20px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 16px;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);

    color:#fff;

    border-radius:50px;

    font-size:13px;
    font-weight:600;

    z-index:10;

}

.villa-badge i{

    color:var(--gold);

}

.villa-content{

    padding:28px;

}

.villa-content h4 {

    color:#fff !important;

    font-size:22px;
    font-weight:600;

    margin-bottom:10px;

}

.villa-location{

    display:flex;
    align-items:center;
    gap:8px;

    color:#B8B8B8;

    font-size:14px;

    margin-bottom:22px;

}

.villa-location i{

    color:var(--gold);

    width:18px;

}

.villa-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px 10px;

    margin-bottom:28px;

}

.villa-divider {
    margin:16px 0 24px !important;
    border-color:rgba(255,255,255,.08) !important;
}

.villa-item {

    display:flex;

    align-items:center;

    gap:10px;

    color:#DDD;

    font-size:14px;

}

.villa-item i{

    width:18px;

    text-align:center;

    color:var(--gold);

    font-size:16px;

}

.villa-item span{

    color:#DDD;

    line-height:1.4;

}

.btn-property{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--gold);

    text-decoration:none;

    font-weight:600;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);

    transition:.3s;

}

.btn-property i{

    transition:.3s;

}

.btn-property:hover{

    color:#fff;

}

.btn-property:hover i{

    transform:translateX(6px);

}

.swiper-pagination{

    bottom:0 !important;

}

.swiper-pagination-bullet{

    width:10px;
    height:10px;

    background:#666;

    opacity:1;

    transition:.3s;

}

.swiper-pagination-bullet-active{

    width:30px;

    border-radius:30px;

    background:var(--gold);

}

@media(max-width:992px){

    .villa-card img{

        height:260px;

    }

}

@media(max-width:768px){

    .property-section{

        padding:80px 0;

    }

    .villa-content{

        padding:22px;

    }

    .villa-content h4{

        font-size:20px;

    }

    .villa-info{

        gap:14px 8px;

    }

    .villa-item{

        font-size:13px;

    }

}

@media(max-width:480px){

    .villa-card img{

        height:220px;

    }

    .villa-content{

        padding:18px;

    }

    .villa-badge{

        top:15px;
        left:15px;

        padding:7px 14px;

        font-size:12px;

    }

}

.testimonial-section{

padding:120px 0;

background:#17171D;

}
.testimonial-card{

background:#25252D;

padding:40px;

border-radius:25px;

height:100%;

}
.stars{

font-size:20px;

color:var(--gold);

margin-bottom:20px;

}
.testimonial-card p{

font-style:italic;

}

.blog-section{

padding:120px 0;

background:var(--dark);

}
.blog-card{

background:#25252D;

overflow:hidden;

border-radius:25px;

transition:.4s;

}
.blog-card:hover{

transform:translateY(-10px);

}
.blog-card img{

width:100%;

height:250px;

object-fit:cover;

}
.blog-content{

padding:25px;

}
.blog-content a{

color:var(--gold);

font-weight:600;

}

.cta-section{

padding:120px 0;

}
.cta-box{

background:
linear-gradient(
135deg,
var(--gold),
#c59200
);

padding:80px;

border-radius:30px;

text-align:center;

color:white;

}
.cta-box h2{

color:white;

font-size:60px;

margin-bottom:20px;

}
/* Mengatur teks paragraf pada cta-box agar kontras dengan background emas */
.cta-section .cta-box p {
    color: #ffffff !important;
}

.cta-box .btn{

padding:15px 40px;

border-radius:50px;

font-weight:600;

}

footer{

background:#111116;

padding-top:100px;

}
.footer-logo{

height:70px;

margin-bottom:25px;

}
footer h5{

margin-bottom:20px;

}
footer ul li{

margin-bottom:12px;

}
footer ul li a{

color:#bdbdbd;

transition:.3s;

}
footer ul li a:hover{

color:var(--gold);

}
.socials{

display:flex;
gap:15px;

margin-top:20px;

}
.socials a{

width:45px;
height:45px;

border-radius:50%;

background:#222;

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

color:white;

transition:.3s;

}
.socials a:hover{

background:var(--gold);

}
footer hr{

margin:50px 0 30px;

border-color:
rgba(255,255,255,.08);

}
.copyright{

text-align:center;

padding-bottom:30px;

color:#888;

}

@media(max-width:991px){

h1{
font-size:54px;
}

h2{
font-size:42px;
}

.about-content{
padding-left:0;
margin-top:40px;
}

.navbar-collapse{
    display:none !important;
}

.mega-menu-content{
    display:none !important;
}

}

@media(max-width:768px){

.hero{
text-align:center;
}

.hero-buttons{

display:flex;
flex-direction:column;

gap:15px;

}

h1{
font-size:42px;
}

h2{
font-size:34px;
}

.partner-wrapper{

flex-wrap:wrap;
justify-content:center;

}

.cta-box{

padding:50px 30px;

}

.cta-box h2{

font-size:38px;

}

}

/* ==========================================
   CONSISTENT DARK MODE FOR INTERNAL PAGES
========================================== */

.page-content {
    min-height: 100vh;
    background: var(--dark, #1D1D23) !important;
    color: var(--text, #D8D8D8) !important;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child {
    margin-top: 0;
}

.page-content h2 {
    font-size: 2.8rem;
}

.page-content h3 {
    font-size: 2.1rem;
}

.page-content h4 {
    font-size: 1.6rem;
}

.page-content h5 {
    font-size: 1.2rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.page-content h6 {
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

.page-content p {
    color: #bcbcbc !important;
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.page-content strong {
    color: #ffffff !important;
    font-weight: 600;
}

.page-content a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 500;
    transition: .3s;
}

.page-content a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ==========================================
   ELEGANT LIST STYLES (Bullet & Number)
   ========================================== */

.page-content ul {
    list-style: none;
    margin-bottom: 1.8rem;
    padding-left: 0;
}

.page-content ul li {
    position: relative;
    padding-left: 28px;
    color: #bcbcbc !important;
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.page-content ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 6px;
    height: 6px;
    background-color: var(--gold);
    border-radius: 50%;
}

.page-content ol {
    counter-reset: elegant-counter;
    list-style: none;
    margin-bottom: 1.8rem;
    padding-left: 0;
}

.page-content ol li {
    position: relative;
    counter-increment: elegant-counter;
    padding-left: 32px;
    color: #bcbcbc !important;
    line-height: 1.8;
    margin-bottom: 0.85rem;
}

.page-content ol li::before {
    content: counter(elegant-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold);
    line-height: 1.8;
}

.page-content ul ul, 
.page-content ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 15px;
}

.page-content blockquote {
    border-left: 3px solid var(--gold);
    padding: 20px 30px;
    margin: 2.5rem 0;
    background: #22232A !important;
    border-radius: 0 16px 16px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-style: italic;
    color: #ffffff !important;
    line-height: 1.6;
}

.page-content blockquote p {
    margin-bottom: 0;
    color: #ffffff !important;
}

.page-content hr,
.page-content .villa-divider {
    margin: 3rem 0;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.page-header{

    position:relative;

    padding:170px 0 90px;

    background:
    linear-gradient(rgba(8,15,26,.78),rgba(8,15,26,.78)),
    url("../images/bg-page.jpg") center center / cover no-repeat;

    overflow:hidden;

}

.page-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(193,154,107,.18),
    transparent 45%);

}

.page-header-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

}

.page-content .page-header .page-header-content h1{

    color:#ffffff !important;

}

.page-header span{

    display:inline-block;

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.85rem;

    margin-bottom:15px;

}

.page-header h1{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    margin-bottom:20px;

}

.page-header p{

    max-width:720px;

    margin:auto;

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

.page-breadcrumb{

    margin-top:30px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    font-size:.95rem;

}

.page-breadcrumb a,
.page-breadcrumb span{

    display:inline-flex;

    align-items:center;

    margin:0;

    padding:0;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:0;

    text-transform:none;

    line-height:1;

}

.page-breadcrumb a{

    color:rgba(255,255,255,.85);

    text-decoration:none;

    transition:.3s;

}

.page-breadcrumb a:hover{

    color:var(--gold);

}

.page-breadcrumb span{

    color:var(--gold);

}

.page-breadcrumb i{

    font-size:11px;

    color:rgba(255,255,255,.45);

    line-height:1;

}

.page-section{

    padding:90px 0;

}

.page-card{

    background: var(--dark-light, #25252D) !important;
    border-radius:20px;
    padding:40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

}

@media(max-width:991px){

.page-header{

    padding:145px 0 70px;

}

.page-header h1{

    font-size:3rem;

}

}

@media(max-width:768px){

.page-header{

    padding:130px 0 60px;

}

.page-header h1{

    font-size:2.3rem;

}

.page-header p{

    font-size:.95rem;

}

.page-section{

    padding:60px 0;

}

.page-card{

    padding:25px;

}

}

.contact-item{
    padding:24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius:18px;
    background: var(--dark-light, #25252D) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition:.35s;
}

.contact-item:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    border-color:var(--gold);
}

.contact-item .d-flex{
    display:flex;
    align-items:center;
    gap:18px;
}

.contact-icon{
    width:60px;
    height:60px;
    flex:0 0 60px;

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

    background:rgba(212,171,37,.1) !important;
    border-radius:16px;
}

.contact-icon i{
    color:var(--gold);
    font-size:22px;
    line-height:1;
}

.contact-content{
    flex:1;
}

.contact-content h5{
    margin:0 0 6px;
    font-size:1.05rem;
    font-weight:600;
    color:#ffffff !important;
}

.contact-content p{
    margin:0;
    color:#bcbcbc !important;
    line-height:1.7;
}

@media (max-width:768px){

    .contact-item{
        padding:20px;
    }

    .contact-item .d-flex{
        gap:15px;
    }

    .contact-icon{
        width:52px;
        height:52px;
        flex:0 0 52px;
        border-radius:14px;
    }

    .contact-icon i{
        font-size:20px;
    }

}

.page-card h3{
    font-family:'Cormorant Garamond', serif;
    font-size:2rem;
    margin-bottom:30px;
    color: #ffffff !important;
}

.page-card h4 {
    color: #ffffff !important;
}

.page-card p {
    color: #bcbcbc !important;
}

.page-card label{
    font-weight:500;
    margin-bottom:8px;
    color: #ffffff !important;
}

.form-control,
.form-select{

    height:56px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.1) !important;

    background: #17171D !important;

    color: #ffffff !important;

    box-shadow:none;

    transition:.3s;

    padding:0 18px;

}

textarea.form-control{

    height:auto;

    padding:18px;

    resize:none;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--gold) !important;

    box-shadow:0 0 0 .15rem rgba(212,171,37,.15);

    background: #17171D !important;

    color: #ffffff !important;

}

.form-control::placeholder,
.form-select::placeholder{

    color:#777 !important;

}

.page-card button{

    padding:15px 40px;

}

.page-card iframe{

    display:block;

    border:0;

}

.contact-social{

    display:flex;

    gap:12px;

    margin-top:35px;

}

.contact-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#22232A;

    color:#fff;

    transition:.35s;

    text-decoration:none;

}

.contact-social a:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-4px);

}

.section-label{

    display:inline-block;

    margin-bottom:12px;

    color:var(--gold);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title{

    color:#ffffff !important;

    font-family:'Cormorant Garamond', serif;

    font-size:3rem;

    font-weight:700;

    line-height:1.2;

    margin-bottom:24px;

}

.page-content .why-card{

    height:100%;

    background: var(--dark-light, #25252D) !important;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    transition:.35s;

}

.page-content .why-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}

.page-content .why-card h4{

    color:#ffffff !important;

    margin:20px 0 15px;

    font-family:'Cormorant Garamond', serif;

    font-size:1.8rem;

}

.page-content .why-card p{

    color:#bcbcbc !important;

    margin-bottom:0;

}

.page-content .why-card .icon{

    background:rgba(212,171,37,.1) !important;

}

.page-content .why-card .icon i{

    color:var(--gold);

}

.page-content .services-section{

    background:#17171D !important;

}

.page-content .service-card{

    height:100%;

    padding:40px 30px;

    background: var(--dark-light, #25252D) !important;

    border:1px solid rgba(255,255,255,.05);

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    transition:.35s;

}

.page-content .service-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}

.page-content .service-card i{

    width:72px;

    height:72px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(212,171,37,.1) !important;

    color:var(--gold);

    font-size:30px;

}

.page-content .service-card h4{

    margin-bottom:15px;

    color:#ffffff !important;

    font-family:'Cormorant Garamond', serif;

    font-size:1.7rem;

}

.page-content .service-card p{

    margin:0;

    color:#bcbcbc !important;

    line-height:1.8;

}

@media(max-width:991px){

    .page-content h2,
    .section-title{

        font-size:2.5rem;

    }

    .page-content h3{

        font-size:2rem;

    }

}

@media(max-width:768px){

    .page-content h2,
    .section-title{

        font-size:2rem;

    }

    .page-content h3{

        font-size:1.7rem;

    }

    .page-content h4{

        font-size:1.35rem;

    }

    .page-content p{

        font-size:.95rem;

    }

}

.pagination{

    gap:12px;

}

.pagination .page-item{

    margin:0;

}

.pagination .page-link{

    width:50px;
    height:50px;

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

    padding:0;

    border:none;

    border-radius:50% !important;

    background:#25252D;

    color:#BDBDBD;

    font-size:15px;
    font-weight:600;

    transition:.35s;

    box-shadow:none;

}

.pagination .page-link:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

}

.pagination .page-item.active .page-link{

    background:var(--gold);

    color:#111;

    box-shadow:0 10px 25px rgba(212,175,55,.35);

}

.pagination .page-item.disabled .page-link{

    background:#1B1B22;

    color:#555;

    opacity:.5;

}

.pagination .page-link:focus{

    box-shadow:none;

}

@media(max-width:576px){

    .pagination{

        gap:8px;

    }

    .pagination .page-link{

        width:42px;
        height:42px;

        font-size:14px;

    }

}

.text-gold{
    color:var(--gold);
}

.mission-list{
    margin:0;
    padding:0;
    list-style:none;
}

.mission-list li{
    position:relative;
    padding-left:34px;
    margin-bottom:18px;
    color:#bcbcbc !important;
    line-height:1.8;
}

.mission-list li:last-child{
    margin-bottom:0;
}

.mission-list li::before{
    content:"\f058";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--gold);
    position:absolute;
    left:0;
    top:2px;
}

.related-property{
    margin-top:80px;
}

.related-card{
    background: var(--dark-light, #25252D) !important;
    border-radius:20px;
    overflow:hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    transition:.35s;
    height:100%;
}

.related-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,171,37,.4);
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.related-image{
    position:relative;
    overflow:hidden;
}

.related-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
}

.related-card:hover img{
    transform:scale(1.08);
}

.related-badge{
    position:absolute;
    top:20px;
    left:20px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.related-content{
    padding:28px;
}

.related-content h4{
    font-size:22px;
    font-weight:700;
    margin-bottom:10px;
    color: #ffffff !important;
}

.related-location{
    display:flex;
    align-items:center;
    gap:8px;
    color:#B8B8B8;
    margin-bottom:20px;
}

.related-meta{
    content-visibility: auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:25px;
}

.related-meta div{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#DDD;
}

.related-meta i{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(212,171,37,.1);
    color: var(--gold);
}

.related-btn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 22px;
    border-radius:50px;
    background:var(--dark);
    color:var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration:none;
    transition:.3s;
    font-weight:600;
}

.related-btn:hover{
    background:var(--gold);
    color:#111;
}

.related-btn i{
    transition:.3s;
}

.related-btn:hover i{
    transform:translateX(5px);
}

/* ===========================
   Dark Mode Styles for Single Post, Comments & Sidebar
   =========================== */
/* ===========================
   Enhanced Dark Mode Comments Section
   =========================== */
.comments-area {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-title, 
.comment-reply-title {
    color: #ffffff !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
}

.comment-list .comment {
    position: relative;
    margin-bottom: 1.5rem;
    background: #25252D;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 20px;
    transition: var(--transition);
}

.comment-list .comment:hover {
    border-color: rgba(212, 171, 37, 0.2);
}

/* Mengatur Tata Letak Komentar (Avatar & Body) */
.comment-body {
    position: relative;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.comment-author .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
}

.comment-author .fn {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.comment-author .fn a {
    color: #ffffff !important;
    text-decoration: none;
}

.comment-author .fn a:hover {
    color: var(--gold) !important;
}

.comment-metadata {
    font-size: 0.85rem;
    margin-top: 2px;
}

.comment-metadata a {
    color: #888 !important;
    text-decoration: none;
    transition: var(--transition);
}

.comment-metadata a:hover {
    color: var(--gold) !important;
}

.comment-content {
    color: #bcbcbc !important;
    margin-left: 65px; /* Menyesuaikan agar sejajar dengan avatar */
    margin-bottom: 15px;
}

.comment-content p {
    color: #bcbcbc !important;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

/* Tombol Reply Bawaan WordPress */
.reply {
    text-align: right;
    margin-top: -10px;
}

.comment-reply-link {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(212, 171, 37, 0.1);
    color: var(--gold) !important;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.comment-reply-link:hover {
    background: var(--gold);
    color: #111 !important;
    transform: translateY(-2px);
}

/* Komentar Bertingkat (Nested / Children) */
.comment-list .children {
    list-style: none;
    padding-left: 40px;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .comment-list .children {
        padding-left: 15px;
    }
    .comment-content {
        margin-left: 0;
        margin-top: 15px;
    }
}

/* Form Komentar (Respond) */
.comment-respond {
    margin-top: 3rem;
    background: #25252D;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.comment-notes, 
.logged-in-as {
    color: #999 !important;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.logged-in-as a {
    color: var(--gold) !important;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-form label {
    display: block;
    color: #ffffff !important;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.comment-form p {
    margin-bottom: 0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    height: 54px;
    background-color: #17171D !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 14px;
    padding: 0 20px;
    font-family: 'Poppins', sans-serif;
    transition: var(--transition);
}

.comment-form textarea {
    height: auto;
    padding: 20px;
    resize: none;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 0.15rem rgba(212, 171, 37, 0.15);
    outline: none;
}

.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
}

.comment-form .comment-form-cookies-consent label {
    margin-bottom: 0;
    color: #bcbcbc !important;
    font-size: 0.9rem;
}

.comment-form .submit {
    display: inline-block;
    background-color: var(--gold);
    color: #111;
    border: none;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
}

.comment-form .submit:hover {
    background-color: var(--gold-hover);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.35);
}

/* Sidebar Categories List Styling */
.categories-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.categories-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.categories-list li a {
    color: #bcbcbc !important;
    text-decoration: none;
    transition: var(--transition);
    display: block;
}

.categories-list li a:hover {
    color: var(--gold) !important;
    padding-left: 5px;
}
/* ===========================
   WordPress Blog Pagination (Dark Mode)
   =========================== */
.property-pagination ul.page-numbers {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.property-pagination .page-numbers {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25252D !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #BDBDBD !important;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50% !important;
    text-decoration: none;
    transition: var(--transition);
}

.property-pagination .page-numbers:hover {
    background: var(--gold) !important;
    color: #111 !important;
    transform: translateY(-4px);
    border-color: var(--gold);
}

.property-pagination .page-numbers.current {
    background: var(--gold) !important;
    color: #111 !important;
    border-color: var(--gold);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.35);
}

.map-section {
    background: #17171D; 
    padding: 100px 0;
}

.map-wrapper {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    transition: var(--transition);
}

.map-wrapper:hover {
    border-color: rgba(212, 171, 37, .4); 
}

.map-wrapper iframe {
    width: 100%;
    height: 450px;
    display: block;
}

@media (max-width: 768px) {
    .map-section {
        padding: 60px 0;
    }
    
    .map-wrapper iframe {
        height: 320px;
    }
}

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.testimonial-img {
    width: 38px !important;
    height: 38px !important;
    object-fit: cover;
}