/* =====================================
   GLOBAL
===================================== */

:root{
--primary:#0F7B45;
--secondary:#D4AF37;
--dark:#1F2937;
--light:#F8FAFC;
--white:#FFFFFF;
}

body{
font-family:'Segoe UI',sans-serif;
font-size:16px;
line-height:1.7;
color:var(--dark);
background:var(--light);
overflow-x:hidden;
}

a{
text-decoration:none;
transition:.3s;
}

img{
max-width:100%;
height:auto;
}

/* =====================================
   NAVBAR
===================================== */

.navbar{
transition:.4s;
padding:15px 0;
}

.navbar.scrolled{
background:#0F7B45 !important;
box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.navbar-brand{
font-weight:700;
font-size:24px;
letter-spacing:.5px;
}

.nav-link{
font-weight:500;
margin-left:10px;
}

.nav-link:hover{
color:#D4AF37 !important;
}

/* =====================================
   HERO
===================================== */

.hero-section{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),
url('../images/hero/kabah.jpg');
background-size:cover;
background-position:center;
background-attachment:fixed;
}

.hero-section h1{
font-size:60px;
font-weight:800;
line-height:1.2;
}

.hero-section p{
font-size:22px;
max-width:700px;
}

.hero-section .btn{
padding:14px 30px;
border-radius:50px;
font-weight:600;
}

/* =====================================
   SECTION TITLE
===================================== */

.section-title{
margin-bottom:50px;
text-align:center;
}

.section-title h2{
font-size:40px;
font-weight:700;
position:relative;
display:inline-block;
}

.section-title h2::after{
content:'';
width:80px;
height:4px;
background:var(--secondary);
position:absolute;
bottom:-15px;
left:50%;
transform:translateX(-50%);
}

/* =====================================
   CARD
===================================== */

.card{
border:none;
border-radius:20px;
overflow:hidden;
transition:.4s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:
0 20px 40px rgba(0,0,0,.12);
}

.card-img-top{
height:250px;
object-fit:cover;
}

.card-body{
padding:25px;
}

/* =====================================
   PACKAGE PRICE
===================================== */

.price{
font-size:30px;
font-weight:700;
color:var(--primary);
}

/* =====================================
   BUTTON
===================================== */

.btn-success{
background:var(--primary);
border:none;
}

.btn-success:hover{
background:#0b6137;
}

.btn-warning{
background:var(--secondary);
border:none;
}

/* =====================================
   KEUNGGULAN
===================================== */

.feature-card{
padding:35px 25px;
text-align:center;
background:#fff;
border-radius:20px;
height:100%;
}

.feature-card i{
font-size:50px;
color:var(--primary);
margin-bottom:20px;
}

/* =====================================
   TESTIMONI
===================================== */

.testimonial-card{
padding:40px;
text-align:center;
}

.testimonial-card img{
width:90px;
height:90px;
object-fit:cover;
border-radius:50%;
margin-bottom:20px;
}

.testimonial-card .stars{
color:#D4AF37;
}

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

.accordion-button:not(.collapsed){
background:var(--primary);
color:white;
}

/* =====================================
   GALLERY
===================================== */

.gallery-img{
border-radius:15px;
cursor:pointer;
transition:.4s;
}

.gallery-img:hover{
transform:scale(1.05);
}

/* =====================================
   DETAIL PAGE
===================================== */

.detail-banner{
padding-top:120px;
padding-bottom:80px;
background:#fff;
}

.detail-banner img{
border-radius:20px;
}

/* =====================================
   FORM
===================================== */

.form-control,
.form-select{
border-radius:12px;
padding:12px;
}

.form-control:focus,
.form-select:focus{
border-color:var(--primary);
box-shadow:
0 0 0 .2rem
rgba(15,123,69,.15);
}

/* =====================================
   FOOTER
===================================== */

footer{
background:var(--dark);
}

footer a{
color:white;
}

footer a:hover{
color:#D4AF37;
}


/* =====================================
   BACK TO TOP
===================================== */

.back-top{
position:fixed;
bottom:100px;
right:20px;
width:50px;
height:50px;
background:var(--primary);
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
z-index:998;
display:none;
}

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

@media(max-width:768px){

.hero-section h1{
font-size:38px;
}

.hero-section p{
font-size:18px;
}

.section-title h2{
font-size:30px;
}

.card-img-top{
height:220px;
}

}


.wa-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:15px 20px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
z-index:999;
}

/* ==========================
   LOGO NAVBAR
========================== */

.navbar-logo{
width:55px;
height:55px;
object-fit:contain;
background:#fff;
padding:4px;
border-radius:10px;
}

.brand-title{
font-size:18px;
font-weight:700;
line-height:1.2;
color:#fff;
}

.brand-subtitle{
display:block;
font-size:11px;
color:#D4AF37;
letter-spacing:1px;
text-transform:uppercase;
}

/* ===============================
   Visitor Counter
================================ */

.visitor-box{

    display:inline-flex;
    align-items:center;
    gap:15px;

    padding:12px 22px;

    background:#ffffff;

    border-radius:50px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.visitor-icon{

    width:55px;
    height:55px;

    background:#198754;

    color:#fff;

    border-radius:50%;

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

    font-size:24px;
}

.visitor-content{
    text-align:left;
}

.visitor-content small{
    display:block;
    color:#777;
    font-size:.8rem;
}

.visitor-content h4{
    margin:0;
    font-weight:700;
    color:#198754;
    letter-spacing:1px;
}