:root {

    --gold: #c9a14c;

    --gold-light: #e0c47a;

    --dark: #0b0b0b;

    --dark-card: #141414;

    --white: #ffffff;

    --gray: #f8f9fa;

}



body {

    font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;

    background: var(--dark);

    color: #eee;

    scroll-behavior: smooth;

}



.gold-text {

    color: var(--gold);

}



.gold-bg {

    background: var(--gold);

}



.bg-dark-card {

    background: var(--dark-card);

}



.border-gold {

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

}



/* top bar */

.top-bar {

    background: #111;

    color: #ccc;

    font-size: 0.85rem;

    padding: 6px 0;

    border-bottom: 1px solid #2a2a2a;

}



.top-bar a {

    color: #ddd;

    text-decoration: none;

    margin: 0 8px;

}



.top-bar a:hover {

    color: var(--gold);

}



.top-bar .social-icons a {

    font-size: 0.95rem;

    margin: 0 5px;

}



/* navbar */

.navbar {

    background: rgb(0 0 0) !important;

    backdrop-filter: blur(4px);

    border-bottom: 1px solid #2a2a2a;

}



.navbar-brand {

    font-weight: 700;

    letter-spacing: 0.5px;

    color: var(--gold) !important;

}



.navbar-brand i {

    color: var(--gold);

    margin-right: 6px;

}



.nav-link {

    color: #eee !important;

    font-weight: 500;

}



.nav-link:hover,

.nav-link.active {

    color: var(--gold) !important;

}



.btn-gold {

    background: var(--gold);

    color: #000;

    font-weight: 600;

    border: none;

    padding: 6px 20px;

    border-radius: 30px;

    transition: 0.3s;

}



.btn-gold:hover {

    background: var(--gold-light);

    color: #000;

    transform: scale(1.02);

}



.btn-outline-gold {

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

    color: var(--gold);

    background: transparent;

    border-radius: 30px;

    padding: 6px 22px;

    font-weight: 600;

}



.btn-outline-gold:hover {

    background: var(--gold);

    color: #000;

}



/* hero slider */

.carousel-item {

    height: 92vh;

    min-height: 420px;

    background-size: cover;

    background-position: center;

}



.carousel-item::after {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    z-index: 1;

}



.carousel-caption {

    z-index: 2;

    bottom: 25%;

    text-align: left;

    max-width: 700px;

}



.carousel-caption h1 {

    font-size: 3.2rem;

    font-weight: 700;

    letter-spacing: -0.5px;

}



.carousel-caption p {

    font-size: 1.2rem;

    opacity: 0.9;

}



.carousel-indicators button {

    background: var(--gold);

    width: 10px;

    height: 10px;

    border-radius: 50%;

}



/* sections */

section {

    overflow: hidden;

}



.section-title {

    position: relative;

    display: inline-block;

    font-weight: 700;

    letter-spacing: 1px;

}



.section-title:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 60px;

    height: 3px;

    background: var(--gold);

}



.section-subtitle {

    color: #aaa;

}



/* cards */

.service-card,

.feature-card,

.step-card {

    background: var(--dark-card);

    border: 1px solid #2a2a2a;

    border-radius: 16px;

    padding: 1.8rem 1.2rem;

    transition: 0.3s;

    height: 100%;

}



.service-card:hover,

.feature-card:hover,

.step-card:hover {

    transform: translateY(-6px);

    border-color: var(--gold);

    box-shadow: 0 10px 25px rgba(201, 161, 76, 0.15);

}



.service-icon {

    font-size: 2.5rem;

    color: var(--gold);

    margin-bottom: 1rem;

}



.gold-border-bottom {

    border-bottom: 2px solid var(--gold);

}



/* counter */

.counter-box {

    text-align: center;

    padding: 1rem;

}



.counter-number {

    font-size: 2.8rem;

    font-weight: 700;

    color: var(--gold);

}



/* gallery */

.gallery-img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    border-radius: 12px;

    transition: 0.3s;

    cursor: pointer;

    border: 2px solid transparent;

}



.gallery-img:hover {

    border-color: var(--gold);

    transform: scale(1.02);

}



.gallery-section {

    background: #f8f9fa;

}



.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 12px;

}



.gallery-item img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    transition: .5s;

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.gallery-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .6);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: .4s;

}



.gallery-item:hover .gallery-overlay {

    opacity: 1;

}



/* Lightbox */



#lightbox {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .95);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 99999;

}



#lightbox img {

    max-width: 90%;

    max-height: 85vh;

    border-radius: 10px;

    animation: zoomIn .4s ease;

}



.close-btn {

    position: absolute;

    top: 20px;

    right: 35px;

    color: #fff;

    font-size: 45px;

    cursor: pointer;

    transition: .3s;

}



.close-btn:hover {

    color: #ffc107;

}



@keyframes zoomIn {

    from {

        transform: scale(.7);

        opacity: 0;

    }



    to {

        transform: scale(1);

        opacity: 1;

    }

}



/* Responsive */



@media(max-width:768px) {



    .gallery-item img {

        height: 220px;

    }



    .close-btn {

        font-size: 35px;

        right: 20px;

    }



    #lightbox img {

        max-width: 95%;

    }

}



/* testimonial */

.testimonial-card {

    background: var(--dark-card);

    padding: 2rem 1.5rem;

    border-radius: 20px;

    border-left: 4px solid var(--gold);

    height: 100%;

}



.testimonial-card i {

    color: var(--gold);

    font-size: 1.8rem;

    opacity: 0.5;

}



/* faq */

.faq-item {

    background: var(--dark-card);

    border-radius: 12px;

    margin-bottom: 12px;

    border: 1px solid #2a2a2a;

}



.faq-item .btn-link {

    color: #eee;

    text-decoration: none;

    font-weight: 600;

    width: 100%;

    text-align: left;

    padding: 16px 20px;

}



.faq-item .btn-link:hover {

    color: var(--gold);

}



.faq-item .btn-link:not(.collapsed) {

    color: var(--gold);

}



/* contact */

.contact-info-box {

    background: var(--dark-card);

    padding: 2rem;

    border-radius: 20px;

    border: 1px solid #2a2a2a;

}



.contact-info-box i {

    color: var(--gold);

    width: 30px;

}



/* footer */

footer {

    background: #0a0a0a;

    border-top: 1px solid #222;

}



footer a {

    color: #bbb;

    text-decoration: none;

}



footer a:hover {

    color: var(--gold);

}



/* floating buttons */

.float-wa,

.float-call {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 999;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    color: #fff;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);

    transition: 0.2s;

    text-decoration: none;

}



.float-wa {

    background: #25D366;

    bottom: 100px;

}



.float-call {

    background: #c9a14c;

}



.float-wa:hover,

.float-call:hover {

    transform: scale(1.1);

    color: #fff;

}



/* responsive */

@media (max-width: 992px) {

    .carousel-caption h1 {

        font-size: 2.4rem;

    }



    .carousel-item {

        height: 70vh;

    }



    .navbar .btn-gold {

        display: none;

    }

}



@media (max-width: 576px) {

    .carousel-caption {

        bottom: 15%;

    }



    .carousel-caption h1 {

        font-size: 1.8rem;

    }



    .carousel-caption p {

        font-size: 0.95rem;

    }

}