/* =====================================================
   MK Head & Scalp Spa — Spring Green Theme
   Inspired by fresh spring greens: bright lime cardigan,
   sunlit grass, airy whites — light, alive, beautiful.
   ===================================================== */

/* ---- CSS Custom Properties ---- */
:root {
  --sp-lime:         #6aaa2e;   /* bright cardigan green */
  --sp-lime-light:   #8ac840;   /* sunlit highlight green */
  --sp-lime-soft:    #b5d96e;   /* very light lime */
  --sp-lime-pale:    #dff0b8;   /* almost white green */
  --sp-lime-bg:      #f3fae8;   /* page background tint */
  --sp-dark:         #2d5a0e;   /* dark readable green */
  --sp-mid:          #4a8820;   /* medium forest green */
  --sp-sage:         #c5e880;   /* soft sage/yellow-green */
  --sp-white:        #ffffff;
  --sp-off-white:    #f8fdf2;
  --sp-text:         #2a4a0e;   /* body text dark green */
  --sp-text-mid:     #3d6618;   /* mid-tone text */
  --sp-text-light:   #5a8a2a;   /* lighter text */
}

/* ---- GLOBAL ---- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--sp-off-white);
  color: var(--sp-text);
}

a, button, .btn, .nav-link, .panel-title,
.item-wrapper, .item-img img {
  transition: all 0.3s ease;
}

/* ---- NAVBAR ---- */
.navbar,
.cid-uWL5mZfqLK .navbar {
  background: var(--sp-lime) !important;
  border-bottom: 2px solid rgba(74, 136, 32, 0.3) !important;
  box-shadow: 0 2px 20px rgba(74, 136, 32, 0.18) !important;
}

.navbar-short,
.cid-uWL5mZfqLK .navbar-short,
.cid-uWL5mZfqLK .navbar.opened,
.cid-uWL5mZfqLK .dropdown-menu,
.cid-uWL5mZfqLK .navbar.opened {
  background: #4a8820 !important;
}

.navbar-brand .navbar-caption,
.cid-uWL5mZfqLK .navbar-caption {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.15);
  letter-spacing: 0.02em;
}

.navbar-brand .navbar-caption:hover {
  color: var(--sp-lime-pale) !important;
}

/* Dropdown border */
.cid-uWL5mZfqLK .dropdown-menu {
  border-color: rgba(106, 170, 46, 0.4) !important;
}

/* ---- HERO SLIDER ---- */
.slider5 {
  background: var(--sp-off-white) !important;
}

.slider5 .mbr-overlay {
  background-color: rgba(42, 74, 14, 0.18) !important;
}

.slider5 .carousel-caption h1,
.cid-sNBLwKVrvT .mbr-section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  font-size: clamp(1.6rem, 4vw, 3.2rem);
}

.slider5 .carousel-control,
.cid-sNBLwKVrvT .carousel-control {
  background: rgba(106, 170, 46, 0.5) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

.slider5 .carousel-control:hover {
  background: rgba(74, 136, 32, 0.85) !important;
}

/* ---- QUOTE / INTRO SECTION ---- */
.content2,
.cid-sNBLPXZFYx {
  background: linear-gradient(135deg, #f3fae8 0%, #e8f5d0 60%, #f3fae8 100%) !important;
  border-top: 3px solid rgba(106, 170, 46, 0.2);
  border-bottom: 3px solid rgba(106, 170, 46, 0.2);
}

.content2 .lin,
.cid-sNBLPXZFYx .lin {
  color: var(--sp-text) !important;
  font-style: italic;
  line-height: 1.8;
}

.content2 .mbr-iconfont,
.cid-sNBLPXZFYx .mbr-iconfont {
  color: var(--sp-lime) !important;
}

/* ---- SERVICES SECTION ---- */
.features4,
.cid-sNBLMZ8bqj {
  background: linear-gradient(180deg, #edf8d0 0%, #f3fae8 100%) !important;
}

.features4 .heading,
.cid-sNBLMZ8bqj .mbr-section-title {
  color: var(--sp-dark) !important;
  font-family: 'Oleo Script', display !important;
}

.features4 .mbr-section-subtitle,
.cid-sNBLMZ8bqj .mbr-section-subtitle {
  color: var(--sp-text-mid) !important;
}

.features4 .item-wrapper,
.cid-sNBLMZ8bqj .item-wrapper {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(74, 136, 32, 0.1);
}

.features4 .item-wrapper:hover,
.cid-sNBLMZ8bqj .item-wrapper:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 45px rgba(74, 136, 32, 0.22);
}

.features4 .item-img,
.cid-sNBLMZ8bqj .item-img {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.features4 .item-img img,
.cid-sNBLMZ8bqj .item-img img {
  border-radius: 12px 12px 0 0;
  transition: transform 0.5s ease;
}

.features4 .item-wrapper:hover .item-img img,
.cid-sNBLMZ8bqj .item-wrapper:hover .item-img img {
  transform: scale(1.05);
}

.features4 .text-wrapper,
.cid-sNBLMZ8bqj .text-wrapper {
  background: linear-gradient(180deg, rgba(74,136,32,0) 0%, rgba(45,90,14,0.92) 100%);
  padding: 1.5rem 1rem 1.25rem;
  border-radius: 0 0 12px 12px;
}

.features4 .mbr-title,
.cid-sNBLMZ8bqj .mbr-title {
  color: #ffffff !important;
}

.features4 .first-title .big,
.cid-sNBLMZ8bqj .first-title .big {
  color: #ffffff !important;
  font-size: 1.3em;
  font-weight: 700;
}

/* Service card Book Now buttons */
.features4 .btn-white-outline,
.cid-sNBLMZ8bqj .btn-white-outline {
  background: var(--sp-lime) !important;
  border-color: var(--sp-lime) !important;
  color: #fff !important;
  border-radius: 6px;
}

.features4 .btn-white-outline:hover,
.cid-sNBLMZ8bqj .btn-white-outline:hover {
  background: var(--sp-mid) !important;
  border-color: var(--sp-mid) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(74, 136, 32, 0.3);
}

/* ---- FAQ / ACCORDION SECTION ---- */
.content1,
.cid-sNBM4eunhg {
  background: linear-gradient(135deg, #edf8d0 0%, #f3fae8 100%) !important;
}

.content1 .mbr-section-title,
.cid-sNBM4eunhg .mbr-section-title {
  color: var(--sp-dark) !important;
}

.content1 .card,
.cid-sNBM4eunhg .card {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(106, 170, 46, 0.25) !important;
  border-radius: 10px !important;
  margin-bottom: 0.6rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 136, 32, 0.07);
}

.content1 .card:hover,
.cid-sNBM4eunhg .card:hover {
  border-color: rgba(106, 170, 46, 0.5) !important;
  box-shadow: 0 4px 16px rgba(74, 136, 32, 0.15);
}

.content1 .card-header,
.cid-sNBM4eunhg .card-header {
  background: transparent !important;
  border-bottom: none !important;
}

.content1 .panel-title-edit,
.cid-sNBM4eunhg .panel-title-edit {
  color: var(--sp-text-mid) !important;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content1 .panel-title-edit:hover,
.cid-sNBM4eunhg .panel-title-edit:hover {
  color: var(--sp-dark) !important;
}

.content1 .panel-text,
.cid-sNBM4eunhg .panel-text {
  color: var(--sp-text) !important;
  line-height: 1.75;
}

.content1 .mobi-mbri-arrow-down,
.cid-sNBM4eunhg .mobi-mbri-arrow-down {
  color: var(--sp-lime) !important;
  transition: transform 0.3s ease;
}

.content1 .right-side img,
.cid-sNBM4eunhg .right-side img {
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(74, 136, 32, 0.15);
}

/* ---- GALLERY ---- */
.gallery2,
.cid-vg53KuHxxC {
  background: linear-gradient(180deg, #f3fae8 0%, #edf8d0 100%) !important;
}

.gallery2 .heading,
.cid-vg53KuHxxC .heading {
  color: var(--sp-dark) !important;
}

.gallery2 .item-wrapper,
.cid-vg53KuHxxC .item-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(74, 136, 32, 0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery2 .item-wrapper:hover,
.cid-vg53KuHxxC .item-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(74, 136, 32, 0.22);
}

.gallery2 .item-wrapper img,
.cid-vg53KuHxxC .item-wrapper img {
  transition: transform 0.5s ease;
  border-radius: 12px;
}

.gallery2 .item-wrapper:hover img,
.cid-vg53KuHxxC .item-wrapper:hover img {
  transform: scale(1.05);
}

.gallery2 .icon-wrapper,
.cid-vg53KuHxxC .icon-wrapper {
  background: rgba(106, 170, 46, 0.75) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- CONTACT / MAP SECTION ---- */
.maps4,
.cid-uWHoHZZihO {
  background: linear-gradient(135deg, #f3fae8 0%, #e8f5d0 100%) !important;
}

.maps4 .main-title,
.cid-uWHoHZZihO .main-title {
  color: var(--sp-dark) !important;
}

.maps4 .form-title,
.cid-uWHoHZZihO .form-title {
  color: var(--sp-text-mid) !important;
}

.maps4 .form-text,
.cid-uWHoHZZihO .form-text {
  color: var(--sp-text) !important;
}

.maps4 .form-control-label,
.cid-uWHoHZZihO .form-control-label {
  color: var(--sp-text-mid) !important;
  font-weight: 600;
}

.maps4 .form-control,
.cid-uWHoHZZihO .form-control {
  background: #fff !important;
  border: 1.5px solid rgba(106, 170, 46, 0.4) !important;
  color: var(--sp-text) !important;
  border-radius: 8px;
}

.maps4 .form-control:focus,
.cid-uWHoHZZihO .form-control:focus {
  border-color: var(--sp-lime) !important;
  box-shadow: 0 0 0 3px rgba(106, 170, 46, 0.18) !important;
  outline: none;
}

.maps4 .btn-form,
.cid-uWHoHZZihO .btn-form {
  background: var(--sp-lime) !important;
  border-color: var(--sp-lime) !important;
  color: #fff !important;
  border-radius: 8px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.maps4 .btn-form:hover,
.cid-uWHoHZZihO .btn-form:hover {
  background: var(--sp-mid) !important;
  border-color: var(--sp-mid) !important;
  box-shadow: 0 6px 20px rgba(74, 136, 32, 0.3);
  transform: translateY(-2px);
}

.maps4 .google-map,
.cid-uWHoHZZihO .google-map {
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(106, 170, 46, 0.3);
  box-shadow: 0 6px 24px rgba(74, 136, 32, 0.12);
}

.maps4 .info-title,
.cid-uWHoHZZihO .info-title {
  color: var(--sp-lime) !important;
  font-weight: 600;
}

.maps4 ol li,
.cid-uWHoHZZihO ol li {
  color: var(--sp-text) !important;
}

.maps4 .text-primary,
.cid-uWHoHZZihO .text-primary {
  color: var(--sp-lime) !important;
}

/* ---- FOOTER ---- */
.footer1,
.cid-sMzN9d7VrO {
  background: linear-gradient(135deg, #4a8820 0%, #3a6b18 100%) !important;
  border-top: 3px solid rgba(106, 170, 46, 0.4) !important;
}

.footer1 .mbr-text,
.cid-sMzN9d7VrO .mbr-text {
  color: #e8f8d0 !important;
}

.footer1 .text-primary,
.cid-sMzN9d7VrO .text-primary {
  color: #c5e880 !important;
}

.footer1 .text-primary:hover,
.cid-sMzN9d7VrO .text-primary:hover {
  color: #fff !important;
}

/* ---- GLOBAL TEXT COLORS (on light backgrounds) ---- */
.text-primary {
  color: var(--sp-lime) !important;
}

.text-warning {
  color: var(--sp-lime-light) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--sp-mid) !important;
}

/* ---- BUTTONS (global) ---- */
.btn-primary,
.btn-primary:active {
  background-color: var(--sp-lime) !important;
  border-color: var(--sp-lime) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sp-mid) !important;
  border-color: var(--sp-mid) !important;
  box-shadow: 0 4px 16px rgba(74,136,32,0.3);
  transform: translateY(-2px);
}

.btn-info,
.btn-info:active {
  background-color: #3a6b1a !important;
  border-color: #3a6b1a !important;
  color: #fff !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #2d5a0e !important;
  border-color: #2d5a0e !important;
}

/* ---- MODAL / POPUP ---- */
.modal-content {
  background: #f3fae8 !important;
  border: 1.5px solid rgba(106, 170, 46, 0.3) !important;
  border-radius: 14px !important;
}

.modal-header {
  border-bottom: 1px solid rgba(106, 170, 46, 0.2) !important;
}

.modal-title {
  color: var(--sp-dark) !important;
}

.modal-footer {
  border-top: 1px solid rgba(106, 170, 46, 0.2) !important;
}

.close,
button.close {
  color: var(--sp-lime) !important;
}

/* ---- OFFERS PAGE ---- */
.features5 {
  background: linear-gradient(180deg, #f3fae8 0%, #edf8d0 100%) !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.features5 .mbr-section-title {
  color: var(--sp-dark) !important;
}

.features5 .mbr-section-subtitle {
  color: var(--sp-text-mid) !important;
}

.features5 .item-img {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(74, 136, 32, 0.12);
}

.features5 .item-img img {
  border-radius: 14px;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.features5 .item-img img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(74, 136, 32, 0.2);
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f3fae8; }
::-webkit-scrollbar-thumb { background: var(--sp-lime-soft); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sp-lime); }

/* ---- SELECTION ---- */
::selection {
  background: rgba(106, 170, 46, 0.25);
  color: var(--sp-dark);
}

/* ---- FOCUS ---- */
:focus-visible {
  outline: 2px solid var(--sp-lime);
  outline-offset: 3px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .features4 .item-wrapper { margin-bottom: 1.5rem; }
  .gallery2 .item-wrapper { margin-bottom: 0.75rem; }
  .maps4 .google-map { margin-bottom: 2rem; }
}
