/*** The Soul Spa — Luxury Natural Spa Theme Start ***
   Palette sampled/specified to match the logo exactly:
   Primary        Deep Forest Green   #064D2C
   Secondary      Dark Emerald        #0B5A3A
   Accent (Gold)  Metallic Gold       #C99A3A
   Light Accent   Soft Champagne      #E8D39A
   Background     Warm Ivory          #FFF9EC
   Section BG     Soft Cream          #F7EFD8
   Text           Deep Charcoal       #26332D
   White          Pure White          #FFFFFF
***/
:root {
    --bs-primary: #064D2C;         /* Deep Forest Green */
    --bs-primary-rgb: 6, 77, 44;
    --bs-secondary: #C99A3A;       /* Metallic Gold — used for hover/active/accents */
    --bs-secondary-rgb: 201, 154, 58;
    --bs-light: #FFF9EC;           /* Warm Ivory */
    --bs-light-rgb: 255, 249, 236;
    --bs-dark: #043A22;            /* Footer green, darker than primary */
    --bs-dark-rgb: 4, 58, 34;
    --bs-white: #ffffff;
    --bs-white-rgb: 255, 255, 255;
    --bs-body-color: #26332D;      /* Deep Charcoal */

    /* Extra brand roles not covered by the four Bootstrap slots above */
    --spa-emerald: #0B5A3A;        /* Dark Emerald - secondary depth/gradients */
    --spa-champagne: #E8D39A;      /* Soft Champagne - light accent, footer links */
    --spa-cream: #F7EFD8;          /* Soft Cream - alternate section background */
    --spa-ivory: #FFF9EC;          /* Warm Ivory - base background */
    --spa-charcoal: #26332D;       /* Deep Charcoal - body text */
}

body {
    color: var(--bs-body-color);
    background-color: var(--spa-ivory);
}

.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-dark { color: var(--spa-charcoal) !important; }
.text-light { color: var(--bs-light) !important; }
.text-muted { color: #7d8c82 !important; }

.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }
.bg-white { background-color: var(--bs-white) !important; }

.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
}

.btn-light {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
    color: var(--bs-primary) !important;
}

.btn-light:hover,
.btn-light:focus {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/* Gold call-to-action button: dark green text on gold, per CTA spec */
.btn-gold {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
    font-weight: 700;
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--bs-secondary);
}

/* Highlight word helper for hero headings */
.text-highlight {
    color: var(--bs-secondary);
}

/*** Navbar: deep green bar, white menu text, gold hover ***/
.site-navbar {
    background: var(--bs-primary) !important;
}

.site-navbar nav.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.site-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    margin-right: 20px;
}

.navbar-brand .logo-icon {
    height: 46px;
    width: auto;
    flex-shrink: 0;
}

/* Fix: index.php uses class "logo-full" on the <img>, but only
   ".logo-icon" had a height rule above. With no height/width
   constraint the <img> rendered at its native pixel size (huge),
   which is why the logo filled the whole hero section. This rule
   gives "logo-full" the same treatment as "logo-icon". */
.navbar-brand .logo-full {
    height: 50px;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    object-fit: contain;
}

.navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.navbar-brand .brand-text .brand-name {
    font-family: "PT Serif", serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--bs-white);
    white-space: nowrap;
}

.navbar-brand .brand-text .brand-name .accent {
    font-style: italic;
    color: var(--bs-secondary);
}

.navbar-brand .brand-text .brand-tagline {
    font-size: 8.5px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--spa-champagne);
    margin-top: 2px;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .navbar-brand .logo-icon {
        height: 36px;
    }
    .navbar-brand .logo-full {
        height: 38px;
    }
    .navbar-brand .brand-text .brand-name {
        font-size: 15px;
    }
    .navbar-brand .brand-text .brand-tagline {
        font-size: 7px;
        letter-spacing: 1.5px;
    }
}

.site-navbar .navbar-nav .nav-link {
    color: var(--bs-white) !important;
    font-weight: 600;
    font-size: 13px !important;
    letter-spacing: 0.3px;
    padding: 8px 12px !important;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link.active {
    color: var(--bs-secondary) !important;
}

.site-navbar .navbar-toggler {
    border-color: rgba(255,255,255,0.4);
    padding: 4px 10px;
}

.site-navbar .navbar-toggler .fa {
    color: var(--bs-white) !important;
    font-size: 15px;
}

.site-navbar .btn-search {
    background-color: transparent !important;
    border: 2px solid var(--bs-secondary) !important;
    color: var(--bs-secondary) !important;
}

.site-navbar .btn-search:hover {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
}

.site-navbar .btn-nav-cta {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
    font-weight: 700;
    font-size: 13px !important;
}

.site-navbar .btn-nav-cta:hover {
    background-color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
    color: var(--bs-primary) !important;
}

@media (max-width: 1199px) {
    .site-navbar .navbar-collapse {
        background: var(--bs-primary) !important;
        border-radius: 0 0 12px 12px;
        margin-top: 6px;
    }
    .site-navbar .navbar-nav {
        border-top-color: rgba(255,255,255,0.15) !important;
    }
    .site-navbar .navbar-nav .nav-link {
        padding: 10px 15px !important;
    }
}

/* Extra coverage: recolor remaining Bootstrap components that
   bootstrap.min.css may still hard-code, so nothing outside the
   logo's green/gold/ivory palette can slip through. */
::selection {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-secondary) !important;
    box-shadow: 0 0 0 0.2rem rgba(6, 77, 44, 0.15) !important;
}

.page-item.active .page-link,
.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.badge.bg-primary { background-color: var(--bs-primary) !important; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; }

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--bs-primary) !important;
}
/*** The Soul Spa — Luxury Natural Spa Theme End ***/


/*** Typography & Section Polish Start ***/
html {
    font-size: 15px;
}

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4 {
    font-family: "PT Serif", serif;
    font-weight: 700;
    color: var(--bs-primary);
}

.display-1 { font-size: 3rem !important; }
.display-2 { font-size: 2.6rem !important; }
.display-3 { font-size: 2.2rem !important; }
.display-4 { font-size: 1.85rem !important; }
.display-5 { font-size: 1.6rem !important; }

.carousel-caption .fs-4 {
    font-size: 1.05rem !important;
}

p {
    font-size: 0.95rem;
}

@media (max-width: 767px) {
    .display-1 { font-size: 2.1rem !important; }
    .display-2 { font-size: 1.9rem !important; }
    .display-3 { font-size: 1.7rem !important; }
    .display-4 { font-size: 1.5rem !important; }
}

/* Small uppercase gold eyebrow label used above section headings */
.section-eyebrow,
p.fs-4.text-uppercase {
    color: var(--bs-secondary) !important;
    font-size: 16px !important;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 8px;
}

.section-eyebrow::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--bs-secondary);
    margin: 14px auto 0;
    border-radius: 2px;
}

.text-center .section-eyebrow::after {
    margin-left: auto;
    margin-right: auto;
}

h1.display-3, h1.display-4 {
    font-style: italic;
}

p, li, .menu-desc, .text-body {
    color: var(--spa-charcoal);
}

.btn {
    letter-spacing: 0.4px;
    font-size: 0.9rem;
}
/*** Typography & Section Polish End ***/



/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
 }

 #spinner.show {
     transition: opacity .8s ease-out, visibility 0s linear .0s;
     visibility: visible;
     opacity: 1;
 }
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-primary-outline-0 {
    border: 0;
    color: var(--bs-white) !important;
}

.btn-light-outline-0 {
    border: 0;
    color: var(--bs-primary) !important;
}

.btn-primary-outline-0:hover {
    background: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}

.btn-light-outline-0:hover {
    background: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}

/*** Topbar Start ***/
.sticky-top {
    transition: 0.5s;
    background: var(--bs-primary);
}

.topbar {
    padding: 10px 0;
    background: var(--bs-secondary) !important;
}

/*** Topbar End ***/

/*** Navbar Start ***/
.navbar .navbar-nav .nav-link {
    padding: 10px 15px;
    font-size: 16px;
    transition: .5s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.sticky-top.bg-white .navbar .navbar-nav .nav-link:hover,
.sticky-top.bg-white .navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-secondary);
    color: var(--bs-primary);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light) !important;
    border-radius: 10px !important;
    transition: .5s;
    opacity: 1;
}

@media (min-width: 1200px) {
    .navbar .navbar-collapse .border-top {
        border-top: none !important;
    }
}

#searchModal .modal-content {
    background: rgba(250, 250, 250, .6);
}
/*** Navbar End ***/

/*** Carousel Start ***/
.carousel-item {
    position: relative;
    min-height: 100vh
    
}

.carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-item .carousel-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(255, 249, 236, .82), rgba(255, 249, 236, .82));
    background-size: cover;
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 0;
}

.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon {
    background: transparent;
}

#carouselId .carousel-indicators {
    padding-bottom: 30px;
}

#carouselId .carousel-indicators li {
    border-top: 10px solid var(--bs-white);
    border-bottom: 10px solid var(--bs-white);
    border-right: 5px solid var(--bs-white);
    border-left: 5px solid var(--bs-white);
    margin-right: 10px;
    border-radius: 10px;
    transition: 0.5s;
}

#carouselId .carousel-indicators li.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    border-right: 15px solid var(--bs-primary);
    border-left: 15px solid var(--bs-primary);
}
/*** Carousel End ***/


.bg-breadcrumb {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/appointment-background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*** Services Start ***/
.services .services-item {
    transition: 0.5s;
}

.services .services-item:hover {
    background: var(--bs-primary) !important;
    border-color: var(--bs-secondary) !important;
}

.services .services-item:hover .services-content p,
.services .services-item:hover .services-content h3 {
    color: var(--bs-white);
    transition: 0.5s;
}

.services .services-item:hover .services-content a.btn {
    background: var(--bs-white);
    color: var(--bs-primary) !important;
}

.services .services-item:hover .services-content a.btn:hover {
    color: var(--bs-white) !important;
}

.services .services-item .services-img {
    overflow: hidden;
}

.services .services-item .services-img img {
    transition: 0.5s;
}

.services .services-item .services-img img:hover {
    transform: scale(1.3);
}
/*** Services End ***/



/*** About Start ***/
.about {
    background: var(--spa-cream);
}

.about .fa-hand-holding-medical,
.about .fa-leaf {
    color: var(--bs-secondary) !important;
}
/*** Youtube Video start ***/
.video {
    position: relative;
    padding-right: 70px; 
    padding-bottom: 70px;
    border-radius: 10px;
}

.video .btn-play {
    position: absolute;
    z-index: 3;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
    margin-left: -35px;
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;

}

.video .btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--bs-secondary);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
}

.video .btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--bs-primary);
    border-radius: 50%;
    transition: all 200ms;
}

.video .btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid var(--bs-white);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

#videoModal {
    z-index: 99999;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #ffffff;
    background: #000000;
    opacity: 1;
}
/*** Youtube Video End ***/
/*** About End ***/


/*** Appointment  Start ***/
.appointment {
    position: relative;
    background: linear-gradient(rgba(6, 77, 44, 0.82), rgba(4, 58, 34, 0.88)), url(../img/appointment-background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 30px;
}

/* Section-level intro sitting above the two cards: eyebrow, big
   heading with one highlighted word, short supporting line. */
.appointment .appt-intro {
    max-width: 640px;
    margin-bottom: 42px;
}

.appointment .appt-intro .section-eyebrow {
    color: var(--bs-secondary) !important;
}

.appointment .appt-intro .section-eyebrow::after {
    margin-left: 0;
    margin-right: 0;
}

.appointment .appt-intro h1 {
    color: var(--bs-white);
    font-style: normal;
}

.appointment .appt-intro p {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Left card: the booking form (light ivory, per brand) ---------- */
.appointment .appointment-form {
    background: var(--spa-ivory);
    border-radius: 20px;
    padding: 46px;
    border: none;
    box-shadow: 0 30px 60px rgba(2, 30, 18, 0.45);
}

.appointment .appointment-form .appt-card-title {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: var(--bs-primary);
    margin-bottom: 8px;
}

.appointment .appointment-form .appt-card-subtitle {
    color: var(--spa-charcoal);
    opacity: 0.7;
    font-size: 14.5px;
    margin-bottom: 30px;
}

.appointment .alert {
    border-radius: 10px;
    font-size: 14px;
}

/* Field labels: icon + text, dark charcoal on the light card, gold
   required-asterisk, sitting directly above each input. */
.appointment .form-label-spa {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-primary);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.appointment .form-label-spa i {
    color: var(--bs-secondary);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.appointment .form-label-spa .req {
    color: var(--bs-secondary);
}

/* Inputs / selects / textarea: white field, soft tan border, gold
   focus ring, comfortable padding, dark readable text. */
.appointment .spa-field {
    background-color: var(--bs-white) !important;
    border: 1px solid rgba(6, 77, 44, 0.16) !important;
    border-radius: 9px !important;
    color: var(--spa-charcoal) !important;
    padding: 12px 16px !important;
    font-size: 14.5px;
    width: 100%;
    transition: 0.3s;
}

.appointment .spa-field::placeholder {
    color: #a3a89c;
}

.appointment .spa-field:focus {
    border-color: var(--bs-secondary) !important;
    box-shadow: 0 0 0 0.18rem rgba(201, 154, 58, 0.2) !important;
}

.appointment select.spa-field {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23064D2C' d='M7 9 0 1.6 1.6 0 7 5.8 12.4 0 14 1.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px !important;
    cursor: pointer;
}

.appointment textarea.spa-field {
    resize: vertical;
    min-height: 100px;
}

/* Phone field: fixed-width country-code select glued to the number
   input so they read as one control, like the reference design. */
.appointment .phone-group {
    display: flex;
    gap: 8px;
}

.appointment .phone-group .phone-code {
    flex: 0 0 76px;
    padding-left: 12px !important;
    padding-right: 26px !important;
    background-position: right 8px center;
    text-align: center;
    font-weight: 600;
}

.appointment .phone-group .phone-number {
    flex: 1 1 auto;
    min-width: 0;
}

.appointment .appointment-form .row.gy-3 > div {
    margin-bottom: 2px;
}

/* Gold CTA with icon + trailing arrow, and the trust line beneath it */
.appointment .btn-book {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 16px;
    border-radius: 10px !important;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
    box-shadow: 0 14px 28px rgba(201, 154, 58, 0.35);
}

.appointment .btn-book:hover,
.appointment .btn-book:focus {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.appointment .appt-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--bs-primary);
    opacity: 0.75;
}

.appointment .appt-trust i {
    color: var(--bs-primary);
}

/* ---------- Right card: opening hours (dark green, brand accent) ---------- */
.appointment .appointment-time {
    position: relative;
    background: linear-gradient(160deg, var(--bs-primary), var(--bs-dark));
    border-radius: 20px;
    padding: 44px;
    border: 1px solid rgba(201, 154, 58, 0.25);
    box-shadow: 0 30px 60px rgba(2, 30, 18, 0.45);
    overflow: hidden;
}

.appointment .appointment-time .hours-leaf-deco {
    position: absolute;
    top: 24px;
    right: 26px;
    font-size: 44px;
    color: rgba(201, 154, 58, 0.22);
    transform: rotate(15deg);
}

.appointment .appointment-time .hours-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
}

.appointment .appointment-time .hours-header .hours-icon-badge {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 1.5px solid var(--bs-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary);
    font-size: 18px;
}

.appointment .appointment-time .hours-header h1 {
    color: var(--bs-white);
    font-size: 26px;
    margin-bottom: 0;
    font-style: normal;
}

.appointment .appointment-time .hours-list {
    position: relative;
    z-index: 1;
}

.appointment .appointment-time .hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 2px;
    border-bottom: 1px dashed rgba(232, 211, 154, 0.22);
}

.appointment .appointment-time .hours-row:last-of-type {
    border-bottom: none;
}

.appointment .appointment-time .hours-row .hours-day {
    color: var(--bs-white);
    font-weight: 600;
    font-size: 15px;
}

.appointment .appointment-time .hours-row .hours-value {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.appointment .appointment-time .hours-row .hours-value.closed {
    color: var(--bs-secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.6px;
}

/* Seasonal-offer callout inside the hours card */
.appointment .appointment-time .hours-offer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(201, 154, 58, 0.3);
    border-radius: 14px;
}

.appointment .appointment-time .hours-offer .offer-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(201, 154, 58, 0.18);
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.appointment .appointment-time .hours-offer .offer-text h5 {
    color: var(--bs-white);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}

.appointment .appointment-time .hours-offer .offer-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 0;
    line-height: 1.5;
}

.appointment .appointment-time .hours-offer .offer-arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--bs-secondary);
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.appointment .appointment-time .hours-offer .offer-arrow:hover {
    background: var(--bs-secondary);
    color: var(--bs-primary);
}

/* ---------- Feature strip beneath both cards ---------- */
.appointment .appt-features {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 56px;
}

.appointment .appt-features .appt-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.appointment .appt-features .appt-feature .feature-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1.5px solid var(--bs-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary);
    font-size: 22px;
}

.appointment .appt-features .appt-feature span {
    color: var(--bs-white);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

@media (max-width: 991px) {
    .appointment .appointment-form,
    .appointment .appointment-time {
        padding: 32px 26px;
    }
}
/*** Appointment End ***/

/*** Counter Start ***/
.counter-section .counter-item .counter-content {
    position: relative;
    margin-bottom: 60px;
    background-image: linear-gradient(rgba(6, 77, 44, 0.25), rgba(255, 255, 255, 0.3), rgba(192, 153, 83, 0.25));
    border-radius: 10px;
    z-index: 9;
}

.counter-section .counter-item {
    text-align: center;
    background: rgba(255, 255, 255, .5) !important;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    object-fit: cover;
    border-radius: 0 25% 0 25%;
}

.counter-section .counter-item .counter-content .svg-img {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    margin-bottom: -50px; 
    margin-left: -45px; 
    transform: rotate(180deg);
}

.counter-section .counter-item .counter-quantity {
    width: 110px;
    height: 110px;
    border-radius: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
}
/*** Counter End ***/


/*** Events Start ***/
.gallery .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.gallery .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.gallery .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

.gallery .gallery-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery .gallery-img img {
    transition: 0.5s;
}

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

.gallery .gallery-img .gallery-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    transition: 0.5s;
    opacity: 0;
    z-index: 1;
}

.gallery .gallery-img .search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
    z-index: 2;
    
}

.gallery .gallery-img:hover .gallery-overlay,
.gallery .gallery-img:hover .search-icon {
    opacity: 1;
}
/*** Events End ***/


/*** Massage Menu Start ***/
.massage-menu {
    background: var(--bs-white);
}

.massage-menu .menu-item {
    background: var(--spa-ivory);
    border-radius: 16px;
    padding: 0 0 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(4, 58, 34, 0.08);
    border-bottom: 3px solid transparent;
    transition: 0.4s;
}

.massage-menu .menu-item:hover {
    transform: translateY(-8px);
    border-bottom: 3px solid var(--bs-secondary);
    box-shadow: 0 20px 40px rgba(4, 58, 34, 0.16);
}

.massage-menu .menu-item .menu-body {
    padding: 26px 28px 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Decorative illustrated header — original artwork, not a stock photo,
   so each card gets a rich visual without any licensing concerns. */
.massage-menu .menu-visual {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.massage-menu .menu-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.18) 0, transparent 40%);
}

.massage-menu .menu-visual i {
    position: relative;
    z-index: 1;
    font-size: 52px;
    color: var(--bs-white);
    text-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.massage-menu .menu-visual-ring {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.massage-menu .menu-visual-ring i {
    font-size: 36px;
}

.massage-menu .menu-visual-corner {
    position: absolute;
    color: rgba(255,255,255,0.22);
    font-size: 26px;
    z-index: 0;
}

.massage-menu .menu-visual-corner.tl { top: 14px; left: 18px; transform: rotate(-15deg); }
.massage-menu .menu-visual-corner.br { bottom: 22px; right: 18px; transform: rotate(165deg); }

.massage-menu .menu-visual-wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 22px;
    z-index: 1;
}

.massage-menu .menu-visual.variant-1 { background: linear-gradient(135deg, #0B5A3A, #064D2C); }
.massage-menu .menu-visual.variant-2 { background: linear-gradient(135deg, #C99A3A, #9c7526); }
.massage-menu .menu-visual.variant-3 { background: linear-gradient(135deg, #064D2C, #0B5A3A); }
.massage-menu .menu-visual.variant-4 { background: linear-gradient(135deg, #9c7526, #C99A3A); }
.massage-menu .menu-visual.variant-5 { background: linear-gradient(135deg, #043A22, #0B5A3A); }
.massage-menu .menu-visual.variant-6 { background: linear-gradient(135deg, #C99A3A, #064D2C); }

.massage-menu .menu-item h4 {
    font-family: "PT Serif", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--bs-primary);
    margin-bottom: 12px;
}

.massage-menu .menu-item p.menu-desc {
    color: var(--spa-charcoal);
    opacity: 0.8;
    font-size: 15px;
    line-height: 1.7;
    min-height: 72px;
    flex-grow: 1;
}

.massage-menu .menu-item .menu-price {
    border-top: 1px dashed rgba(6, 77, 44, 0.2);
    margin-top: 18px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.2px;
    color: var(--bs-secondary);
}

.massage-menu .menu-item .menu-price span.divider {
    color: var(--bs-primary);
    padding: 0 8px;
    opacity: 0.4;
}

.massage-menu .menu-item > .menu-body > a.btn {
    align-self: flex-start;
    font-size: 14px;
    letter-spacing: 0.5px;
}
/*** Massage Menu End ***/

/*** Team Start ***/
.team .team-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.team .team-item .team-text {
    background: var(--bs-primary);
}

.team .team-item .team-social {
    position: absolute;
    top: -180px; 
    left: 20px; 
    opacity: 0;
    transition: 0.5s;
}

.team .team-item:hover .team-social {
    top: 20px; 
    left: 20px;
    opacity: 1;
}

.team .team-item .team-img {
    position: relative;
    width: 100%;
}

.team .team-item .team-img::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.team .team-item:hover .team-img::after {
    bottom: 0;
    height: 100%;
}

.team .team-item .team-text {
    transition: 0.5s;
}

.team .team-item:hover .team-text {
    background: var(--bs-secondary);
}
/*** Team End ***/

/*** testimonial Start ***/
.testimonial {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/testimonial-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonial .testimonial-item {
    background: rgba(0, 0, 0, 0.4);
}

.testimonial .owl-carousel.testimonial-carousel {
    position: relative;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
    display: flex;
    font-size: 40px;
    color: var(--bs-white);
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev {
    margin-right: 40px;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev,
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-next {
    transition: 0.5s;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--bs-primary);
}
/*** testimonial end ***/

/*** Contact Start ***/
.contact {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/appointment-background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact .contact-form {
    background: rgba(255, 255, 255, 0.6);
}
/*** Contact End ***/

/*** footer start ***/
.footer {
    background: var(--bs-dark);
}

.footer .footer-item a {
    color: var(--spa-champagne);
    line-height: 30px;
    font-size: 15px;
    display: inline-block;
    transition: 0.3s;
}

.footer .footer-item p {
    color: var(--bs-white);
    line-height: 26px;
    font-size: 15px;
    margin-bottom: 4px;
}

.footer .footer-item a:hover {
    letter-spacing: 1px;
    color: var(--bs-secondary) !important;
}

.footer .footer-item h4 {
    color: var(--bs-white);
    font-size: 18px;
}

.footer .footer-item i {
    color: var(--bs-secondary);
}

/* Brand column: logo, one-line description, social icons */
.footer .footer-brand .footer-logo {
    height: 44px;
    width: auto;
}

.footer .footer-brand p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.7;
    max-width: 320px;
}

/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark) !important;
}

.copyright span {
    font-size: 13.5px;
    letter-spacing: 0.3px;
    opacity: 0.85;
}
/*** copyright end ***/


/*** ================================================================
     ADMIN PANEL — same green / gold / ivory brand palette as the
     public site, reusing the :root variables defined at the top of
     this file. This block assumes the class names visible in your
     dashboard screenshot (sidebar, stat cards, chart bars, "Next up"
     list). If your admin markup uses different class names, share
     admin/dashboard.php (or its layout partial) and its CSS file and
     these selectors can be lined up exactly — the colors/variables
     below will stay the same either way.
   ================================================================ ***/

/* Whole-page canvas behind the sidebar + content */
.admin-body,
body.admin {
    background-color: var(--spa-ivory);
    color: var(--spa-charcoal);
}

/* Sidebar: deep forest green, gold active/hover state, same font
   pairing as the public site (serif brand name, sans body text) */
.admin-sidebar,
.sidebar {
    background: var(--bs-primary) !important;
    color: var(--bs-white);
}

.admin-sidebar .sidebar-brand,
.sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(232, 211, 154, 0.15);
}

.admin-sidebar .sidebar-brand .brand-name,
.sidebar .sidebar-brand .brand-name {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--bs-white);
}

.admin-sidebar .sidebar-brand .brand-sub,
.sidebar .sidebar-brand .brand-sub {
    font-size: 11.5px;
    color: var(--spa-champagne);
    opacity: 0.8;
}

.admin-sidebar .nav-link,
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--spa-champagne) !important;
    font-weight: 600;
    font-size: 14.5px;
    padding: 12px 18px;
    border-radius: 8px;
    margin: 3px 12px;
    transition: 0.25s;
}

.admin-sidebar .nav-link i,
.sidebar .nav-link i {
    width: 18px;
    text-align: center;
    color: var(--spa-champagne);
    opacity: 0.85;
}

.admin-sidebar .nav-link:hover,
.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--bs-white) !important;
}

.admin-sidebar .nav-link.active,
.sidebar .nav-link.active {
    background: var(--bs-secondary) !important;
    color: var(--bs-primary) !important;
    font-weight: 700;
}

.admin-sidebar .nav-link.active i,
.sidebar .nav-link.active i {
    color: var(--bs-primary);
    opacity: 1;
}

.admin-sidebar .sidebar-footer,
.sidebar .sidebar-footer {
    color: var(--spa-champagne);
    opacity: 0.75;
    font-size: 12.5px;
    padding: 16px 18px;
    border-top: 1px solid rgba(232, 211, 154, 0.15);
}

/* Main content header */
.admin-content h1,
.admin-content h2,
.admin-main h1,
.admin-main h2 {
    font-family: "PT Serif", serif;
    color: var(--bs-primary);
}

.admin-content .page-subtitle,
.admin-main .page-subtitle {
    color: #7d8c82;
    font-size: 14px;
}

/* Stat cards: white card, gold icon badge, green serif number —
   matches "Today's Bookings / Upcoming / Active Customers / Revenue" */
.admin-stat-card,
.stat-card {
    background: var(--bs-white);
    border: 1px solid rgba(6, 77, 44, 0.08);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 6px 18px rgba(4, 58, 34, 0.06);
    transition: 0.3s;
}

.admin-stat-card:hover,
.stat-card:hover {
    box-shadow: 0 12px 26px rgba(4, 58, 34, 0.12);
    transform: translateY(-3px);
}

.admin-stat-card .stat-icon,
.stat-card .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 154, 58, 0.14);
    color: var(--bs-secondary);
    font-size: 18px;
    margin-bottom: 14px;
}

.admin-stat-card .stat-value,
.stat-card .stat-value {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--bs-primary);
    line-height: 1.2;
}

.admin-stat-card .stat-label,
.stat-card .stat-label {
    color: #7d8c82;
    font-size: 13px;
    margin-top: 2px;
}

/* Panels (Bookings this week / Next up) */
.admin-panel,
.dashboard-panel {
    background: var(--bs-white);
    border: 1px solid rgba(6, 77, 44, 0.08);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 6px 18px rgba(4, 58, 34, 0.06);
}

.admin-panel h3,
.dashboard-panel h3 {
    font-family: "PT Serif", serif;
    color: var(--bs-primary);
    font-size: 19px;
    margin-bottom: 20px;
}

/* Weekly bookings bar chart — gold bars, green baseline, so it reads
   as an accent rather than a flat brown block */
.admin-panel .chart-bar,
.dashboard-panel .chart-bar {
    background: linear-gradient(180deg, var(--bs-secondary), #9c7526);
    border-radius: 4px 4px 0 0;
}

.admin-panel .chart-axis,
.dashboard-panel .chart-axis {
    border-top: 2px solid rgba(6, 77, 44, 0.15);
    color: #7d8c82;
    font-size: 12.5px;
}

/* "Next up" appointment list rows */
.admin-panel .next-up-row,
.dashboard-panel .next-up-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(6, 77, 44, 0.08);
}

.admin-panel .next-up-row:last-child,
.dashboard-panel .next-up-row:last-child {
    border-bottom: none;
}

.admin-panel .next-up-row .client-name,
.dashboard-panel .next-up-row .client-name {
    font-weight: 700;
    color: var(--bs-primary);
    font-size: 15px;
}

.admin-panel .next-up-row .service-name,
.dashboard-panel .next-up-row .service-name {
    color: #7d8c82;
    font-size: 13px;
}

.admin-panel .next-up-row .appt-time,
.dashboard-panel .appt-time {
    text-align: right;
    color: var(--bs-secondary);
    font-weight: 700;
    font-size: 14px;
}

.admin-panel .next-up-row .appt-date,
.dashboard-panel .appt-date {
    display: block;
    color: #7d8c82;
    font-weight: 500;
    font-size: 12px;
}

/* Buttons / tables / badges inside the admin area reuse the public
   site's brand button + badge rules already defined above
   (.btn-primary, .btn-gold, .badge.bg-primary, etc.) so styling one
   place keeps both areas in sync. Add a couple of admin-only pieces: */
.admin-table thead th {
    background: var(--spa-cream);
    color: var(--bs-primary);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 2px solid rgba(6, 77, 44, 0.1);
}

.admin-table tbody tr:hover {
    background: rgba(201, 154, 58, 0.06);
}

.admin-badge-confirmed {
    background: rgba(6, 77, 44, 0.12);
    color: var(--bs-primary);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-badge-pending {
    background: rgba(201, 154, 58, 0.15);
    color: #9c7526;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
}
/*** ADMIN PANEL End ***/