:root {
    --bs-body-bg: #F8F7F4; /* Soft beige background */
    --bs-body-color: #4A4A4A; /* Dark gray text */
    --bs-primary: #588157;
    --bs-primary-rgb: 88, 129, 87;
    --bs-secondary: #3A5A40;
    --bs-secondary-rgb: 58, 90, 64;
    --bs-link-color: #3A5A40;
    --bs-link-hover-color: #588157;
}

/*  #F8F7F4
        #e6e5e3 */
body {
    font-family: 'Inter', sans-serif;
}

h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Playfair Display', serif;
    color: var(--bs-secondary);
}

#herotext {
    font-family: 'Playfair Display', serif;
    color: #bcbec0;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    transition: transform 0.2s ease-in-out;
}

    .btn-primary:hover {
        transform: translateY(-2px);
    }

.btn-outline-primary-custom {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-color: #fff;
}

.section-title {
    font-size: calc(1.5rem + 1.5vw);
}

@media (min-width: 1200px) {
    .section-title {
        font-size: 3rem;
    }
}

.card {
    transition: all 0.3s ease-in-out;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

.hero-section {
    height: 80vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-image: url('../assets/img/spabackground.jpg');
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.time-slot.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

html {
    scroll-padding-top: 70px; /* Adjust for sticky navbar */
}

.card-body {
    background-color: floralwhite;
}

#imgToast1 {
    width: 50px;
}

/* Fullscreen overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px); /* efek blur */
    background-color: rgba(255, 255, 255, 0.5); /* semi-transparan */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Animasi zoom in - zoom out */
.loader-text {
    font-size: 2rem;
    font-weight: bold;
    animation: zoomInOut 1.5s ease-in-out infinite;
}

@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

body.loading {
    overflow: hidden;
}