/*
 * Vision Beauty – Modern Visual Layer
 * Added on top of existing style.css to upgrade the look to 2026 standards.
 * Does NOT change content, structure, links, or images.
 */

/* ─── Google Fonts Upgrade ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ─── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Colors */
  --vb-brown:       #90510F;
  --vb-brown-dark:  #6b3b08;
  --vb-brown-light: #C9956A;
  --vb-gold:        #D4A96A;
  --vb-purple:      #884cd2;
  --vb-cream:       #FAF7F2;
  --vb-cream-deep:  #F3EEE6;
  --vb-dark:        #1A0D05;
  --vb-navy:        #00173c;
  --vb-text:        #4A3728;
  --vb-muted:       #8B7B6B;
  --vb-white:       #FFFFFF;

  /* Shadows */
  --shadow-xs:   0 2px 8px rgba(0,0,0,.06);
  --shadow-sm:   0 4px 16px rgba(0,0,0,.08);
  --shadow-md:   0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.12);
  --shadow-xl:   0 24px 64px rgba(0,0,0,.14);
  --shadow-warm: 0 8px 32px rgba(144,81,15,.20);

  /* Radius */
  --r-xs:  6px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   0.2s;
  --t-base:   0.35s;
  --t-slow:   0.55s;
}

/* ─── Base / Body ──────────────────────────────────────────────── */
body {
  font-family: 'Inter', 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--vb-text);
  background-color: var(--vb-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography Hierarchy ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'PT Serif', serif;
  color: var(--vb-dark);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; }
h3 { font-size: clamp(1.4rem, 3vw, 2rem);   font-weight: 600; }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 600; }
h5 { font-size: clamp(1rem, 2vw, 1.2rem);   font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }

p { line-height: 1.8; }

/* Section title styling upgrade */
.section-title > span,
.section-title h5 {
  font-family: 'Inter', sans-serif;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--vb-brown) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.section-title > span::before,
.section-title h5::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--vb-brown);
  border-radius: 2px;
}

.section-title h2 {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

/* ─── Links & Focus ────────────────────────────────────────────── */
a {
  transition: color var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}
a:hover { color: var(--vb-brown); }
a:focus-visible {
  outline: 2px solid var(--vb-brown);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--vb-cream); }
::-webkit-scrollbar-thumb {
  background: var(--vb-brown);
  border-radius: var(--r-full);
}
::selection { background: var(--vb-brown); color: #fff; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn,
.ss-btn,
.btn.ss-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: var(--r-full) !important;
  padding: 16px 36px !important;
  border: none !important;
  background: var(--vb-brown) !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out) !important;
  box-shadow: var(--shadow-warm) !important;
  z-index: 1 !important;
  display: inline-block !important;
}

.btn::after,
.ss-btn::after,
.btn.ss-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.btn:hover,
.ss-btn:hover,
.btn.ss-btn:hover {
  background: var(--vb-brown-dark) !important;
  color: #fff !important;
  box-shadow: 0 12px 40px rgba(144,81,15,.35) !important;
  transform: translateY(-2px) !important;
}

.btn:active,
.ss-btn:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-warm) !important;
}

/* Variant: outline */
.btn.ss-btn.active,
.btn-outline {
  background: transparent !important;
  border: 2px solid var(--vb-brown) !important;
  color: var(--vb-brown) !important;
  box-shadow: none !important;
}

.btn.ss-btn.active:hover {
  background: var(--vb-brown) !important;
  color: #fff !important;
}

/* Purple accent buttons */
.feature-box .text a,
.header-btn,
.second-header-btn .btn,
.search-top ul {
  background: var(--vb-purple) !important;
  border-radius: var(--r-full) !important;
  transition: background var(--t-base), transform var(--t-fast) !important;
}
.feature-box .text a:hover,
.second-header-btn .btn:hover {
  background: var(--vb-brown) !important;
  transform: translateY(-2px) !important;
}

/* s-btn (outline pill) */
.s-btn {
  border-radius: var(--r-full) !important;
  border-color: rgba(144,81,15,.3) !important;
  color: var(--vb-brown) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  padding: 10px 28px !important;
  transition: all var(--t-base) var(--ease-out) !important;
}
.s-btn:hover {
  background: var(--vb-brown) !important;
  border-color: var(--vb-brown) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Scroll-to-top */
#scrollUp {
  background: var(--vb-brown) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-warm) !important;
  transition: transform var(--t-fast), background var(--t-base) !important;
}
#scrollUp:hover {
  transform: translateY(-3px) !important;
  background: var(--vb-brown-dark) !important;
}

/* ─── Preloader ────────────────────────────────────────────────── */
.preloader {
  background: var(--vb-cream);
}
.preloader__circle {
  border-color: var(--vb-cream-deep) !important;
  border-top-color: var(--vb-brown) !important;
}

/* ─── Custom Cursor ────────────────────────────────────────────── */
.custom-cursor__cursor {
  background: var(--vb-brown) !important;
  opacity: 0.85 !important;
}
.custom-cursor__cursor-two {
  border-color: var(--vb-brown) !important;
}

/* ─── Navigation / Header ──────────────────────────────────────── */
.header-area,
.menu-area {
  background: rgba(255,255,255,0.97) !important;
}

.sticky-menu {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.07) !important;
  border-bottom: 1px solid rgba(144,81,15,.08) !important;
}

.main-menu ul li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--vb-dark) !important;
  padding: 22px 0 !important;
  position: relative !important;
}

.main-menu ul li a::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--vb-brown) !important;
  border-radius: var(--r-full) !important;
  transition: width var(--t-base) var(--ease-out) !important;
}

.main-menu ul li:hover > a::before,
.main-menu ul li.active a::before {
  width: 100% !important;
}

.main-menu ul li:hover > a,
.main-menu ul li.active > a {
  color: var(--vb-brown) !important;
}

/* Dropdown sub-menu */
.menu .sub-menu,
.menu .children {
  border-top: 2px solid var(--vb-brown) !important;
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
  animation: dropdownFadeIn var(--t-base) var(--ease-out) !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main-menu .sub-menu li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 20px !important;
  color: var(--vb-text) !important;
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast) !important;
}

.main-menu .sub-menu li a:hover {
  background: var(--vb-cream) !important;
  color: var(--vb-brown) !important;
  padding-left: 28px !important;
}

/* Second header bar */
.second-header {
  background: linear-gradient(90deg, #1A0D05 0%, #2e1a0a 100%) !important;
}

/* Top button */
.top-btn {
  background: var(--vb-brown) !important;
  letter-spacing: 0.06em !important;
  transition: background var(--t-base), transform var(--t-fast) !important;
}
.top-btn:hover {
  background: var(--vb-brown-dark) !important;
  transform: translateY(-1px) !important;
}

/* ─── Hero / Slider ────────────────────────────────────────────── */
.slider-bg {
  position: relative !important;
}

.slider-content > span {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--vb-brown) !important;
}

.slider-content h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--vb-dark) !important;
}

.slider-content h2 span { color: var(--vb-brown) !important; }

.slider-content p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--vb-muted) !important;
}

/* Slider navigation arrows */
.slider-active .slick-arrow {
  border-radius: var(--r-sm) !important;
  background: var(--vb-white) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--vb-brown) !important;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast) !important;
}

.slider-active .slick-arrow:hover {
  background: var(--vb-brown) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
}

/* Slider dots */
.slider-active .slick-dots li button {
  background: rgba(144,81,15,.3) !important;
  border-radius: var(--r-full) !important;
  height: 3px !important;
  transition: all var(--t-base) !important;
}
.slider-active .slick-dots li.slick-active button {
  background: var(--vb-brown) !important;
  width: 40px !important;
}

/* Floating badge on slider */
.s-aliment-1 {
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ─── Feature Box (banner trio) ────────────────────────────────── */
.feature-box {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) !important;
}
.feature-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-xl) !important;
}
.feature-box .text a {
  border-radius: var(--r-full) !important;
}

/* ─── About Section ────────────────────────────────────────────── */
.about-title > span {
  border-radius: var(--r-full) !important;
  padding: 6px 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
}

.about-title h2 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
}

.about-text {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 28px 32px !important;
}

.about-content .exprince {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

.about-content .nav-tabs {
  border-color: rgba(144,81,15,.2) !important;
  border-radius: var(--r-full) !important;
}

.about-content .nav-tabs .nav-item.show .nav-link,
.about-content .nav-tabs .nav-link.active {
  background-color: var(--vb-brown) !important;
  border-radius: var(--r-full) !important;
}

.about-content li .icon i {
  border-radius: var(--r-sm) !important;
  background: rgba(144,81,15,.1) !important;
  color: var(--vb-brown) !important;
}

/* ─── Features / Services Cards ────────────────────────────────── */
.features-services-area .container {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

.single-services {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}
.single-services:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-xl) !important;
}
.single-services::before {
  border-radius: inherit !important;
  background: var(--vb-brown) !important;
  opacity: 0 !important;
}

.services-thumb img {
  transition: transform 0.6s var(--ease-out) !important;
}
.single-services:hover .services-thumb img {
  transform: scale(1.05) !important;
}

.services-content {
  padding: 40px 32px !important;
}
.services-content small {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: var(--vb-brown) !important;
}

/* s-single-services (grid service cards) */
.s-single-services {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0,0,0,.04) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
  overflow: hidden !important;
}
.s-single-services:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Services slider dots */
.services-active .slick-dots li button {
  background: rgba(144,81,15,.25) !important;
  border-radius: var(--r-full) !important;
}
.services-active .slick-dots li.slick-active button {
  background: var(--vb-brown) !important;
}

/* Services box 2 icon */
.services-area2 .services-box2 .services-icon {
  border-radius: var(--r-md) !important;
  background: rgba(144,81,15,.08) !important;
}
.services-box2 .services-content2 .icon {
  border-radius: 50% !important;
  border-color: rgba(144,81,15,.25) !important;
  transition: all var(--t-base) !important;
}
.services-box2 .services-content2 .icon:hover {
  border-color: var(--vb-brown) !important;
  color: var(--vb-brown) !important;
  background: rgba(144,81,15,.06) !important;
}

/* ─── Portfolio / Gallery ─────────────────────────────────────── */
.portfolio-box {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}
.portfolio-box:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--shadow-xl) !important;
}
.portfolio-box img {
  transition: transform 0.6s var(--ease-out) !important;
}
.portfolio-box:hover img {
  transform: scale(1.05) !important;
}
.portfolio-box .caption {
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  box-shadow: none !important;
}
.portfolio-box .caption .arrow-icon {
  color: var(--vb-brown) !important;
}

/* Grid gallery items */
.gallery-image {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}
.gallery-image:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─── Team ─────────────────────────────────────────────────────── */
.single-team {
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}
.single-team:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.team-thumb img {
  border-radius: 0 !important;
  transition: transform 0.6s var(--ease-out) !important;
}
.single-team:hover .team-thumb img {
  transform: scale(1.04) !important;
}

.team-thumb .dropdown .xbtn {
  border-radius: 50% !important;
  background: var(--vb-brown) !important;
  box-shadow: var(--shadow-warm) !important;
  transition: transform var(--t-fast), background var(--t-base) !important;
}
.team-thumb .dropdown .xbtn:hover {
  transform: scale(1.1) !important;
  background: var(--vb-brown-dark) !important;
}

.team-social a {
  border-radius: 50% !important;
  background: var(--vb-purple) !important;
  transition: background var(--t-base), transform var(--t-fast) !important;
}
.team-social a:hover {
  background: var(--vb-brown) !important;
  transform: translateY(-2px) scale(1.1) !important;
}

/* Team active slider arrows */
.team-active .slick-arrow {
  border-radius: 50% !important;
  background: var(--vb-brown) !important;
  transition: background var(--t-base), transform var(--t-fast) !important;
}
.team-active .slick-arrow:hover {
  background: var(--vb-brown-dark) !important;
  transform: scale(1.1) !important;
}

/* ─── Counter ──────────────────────────────────────────────────── */
.single-counter {
  border-radius: var(--r-lg) !important;
  padding: 32px 24px !important;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) !important;
}

.count {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 700 !important;
  color: var(--vb-brown) !important;
}

.counter-tittle {
  border-radius: var(--r-sm) !important;
}
.counter-tittle::before,
.counter-tittle::after {
  border-radius: var(--r-xs) !important;
}

/* ─── CTA ──────────────────────────────────────────────────────── */
.cta-bg .social .icon {
  border-radius: 50% !important;
  background: var(--vb-brown) !important;
  box-shadow: var(--shadow-warm) !important;
  transition: transform var(--t-base) !important;
}
.cta-bg .social .icon:hover {
  transform: scale(1.1) !important;
}

/* ─── Testimonials ─────────────────────────────────────────────── */
.testimonial-active .slick-slide {
  border-radius: var(--r-lg) !important;
  background: var(--vb-cream) !important;
  box-shadow: var(--shadow-md) !important;
  margin: 0 12px 20px !important;
  padding: 36px !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}

.testimonial-active .slick-slide:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.single-testimonial-bg {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

.testimonial-active i {
  color: var(--vb-brown) !important;
}

.testimonial-active .ta-info span {
  color: var(--vb-brown) !important;
}

/* Testimonial arrows */
.testimonial-active .slick-arrow {
  color: var(--vb-brown) !important;
  transition: color var(--t-base) !important;
}
.testimonial-active .slick-arrow:hover {
  color: var(--vb-brown-dark) !important;
}

/* ─── Blog Cards ────────────────────────────────────────────────── */
.single-post {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}
.single-post:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.product,
.home-blog-active .product {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
}
.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.blog-content {
  padding: 32px 28px !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}

.blog-content h4,
.blog-content2 h4 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.blog-content2 {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 28px !important;
}

.blog-content2 .category,
.blog-content2 .date-home {
  border-radius: var(--r-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  background: var(--vb-brown) !important;
}

.b-meta ul li {
  color: var(--vb-brown) !important;
}

/* Blog slider arrows */
.home-blog-active .slick-arrow,
.home-blog-active2 .slick-arrow {
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--vb-brown) !important;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast) !important;
}
.home-blog-active .slick-arrow:hover,
.home-blog-active2 .slick-arrow:hover {
  background: var(--vb-brown) !important;
  color: #fff !important;
  transform: translateX(-2px) !important;
}

/* ─── Pricing ──────────────────────────────────────────────────── */
.pricing-box {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 48px 40px !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out) !important;
  position: relative !important;
  overflow: hidden !important;
}
.pricing-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--vb-brown), var(--vb-gold)) !important;
  opacity: 0 !important;
  transition: opacity var(--t-base) !important;
}
.pricing-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-xl) !important;
}
.pricing-box:hover::before {
  opacity: 1 !important;
}

.pricing-box.active {
  background: linear-gradient(135deg, var(--vb-dark) 0%, #2e1a0a 100%) !important;
}
.pricing-box.active::before {
  opacity: 1 !important;
}

.pricing-head h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.price-count h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--vb-brown) !important;
}

.pricing-area .nav {
  border-radius: var(--r-full) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 6px !important;
}
.pricing-area .nav-pills .nav-link.active {
  border-radius: var(--r-full) !important;
  background: var(--vb-brown) !important;
}

/* Color variant pricing boxes */
.pcolor .col-lg-4.col-md-6:nth-child(1) .pricing-box { background: #fff8f3 !important; }
.pcolor .col-lg-4.col-md-6:nth-child(2) .pricing-box { background: #f7f1ff !important; }
.pcolor .col-lg-4.col-md-6:nth-child(3) .pricing-box { background: #fffaef !important; }

/* ─── Contact ──────────────────────────────────────────────────── */
.contact-bg02 {
  background: var(--vb-cream) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-md) !important;
}

.contact-area input,
.contact-area textarea,
.contact-area select,
#contact-form input,
#contact-form textarea,
#contact-form select {
  border-radius: var(--r-sm) !important;
  border: 1.5px solid rgba(0,0,0,.1) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 14px 20px !important;
  color: var(--vb-dark) !important;
  background: var(--vb-cream) !important;
  transition: border-color var(--t-base), box-shadow var(--t-base) !important;
}
.contact-area input:focus,
.contact-area textarea:focus,
#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--vb-brown) !important;
  box-shadow: 0 0 0 3px rgba(144,81,15,.12) !important;
  outline: none !important;
  background: #fff !important;
}

/* ─── Footer ───────────────────────────────────────────────────── */
.footer-bg {
  background: linear-gradient(160deg, #1a0d05 0%, #0d0703 100%) !important;
}

.footer-widget .footer-title h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  position: relative !important;
  padding-bottom: 14px !important;
}
.footer-widget .footer-title h3::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 32px !important;
  height: 2px !important;
  background: var(--vb-brown) !important;
  border-radius: var(--r-full) !important;
}

.footer-widget p,
.footer-widget li,
.footer-widget a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,.6) !important;
  transition: color var(--t-base) !important;
}
.footer-widget a:hover,
.footer-widget ul li a:hover {
  color: var(--vb-gold) !important;
  padding-left: 4px !important;
}

.footer-social a {
  border-radius: var(--r-sm) !important;
  transition: background var(--t-base), transform var(--t-fast) !important;
}
.footer-social a:hover {
  background: var(--vb-brown) !important;
  transform: translateY(-2px) !important;
}

.copyright-wrap {
  background: #0d0703 !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  color: rgba(255,255,255,.5) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
.copyright-wrap li::before {
  background: var(--vb-brown) !important;
  border-radius: 50% !important;
}
.copyright-wrap a { color: rgba(255,255,255,.5) !important; }
.copyright-wrap a:hover { color: var(--vb-gold) !important; }

/* ─── Breadcrumb ────────────────────────────────────────────────── */
.breadcrumb-area {
  background-color: var(--vb-dark) !important;
}
.breadcrumb-title h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
}
.breadcrumb li a {
  color: var(--vb-gold) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ─── FAQ ───────────────────────────────────────────────────────── */
.accordion-item,
.faq-area .card {
  border-radius: var(--r-md) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--t-base) !important;
}
.accordion-item:hover,
.faq-area .card:hover {
  box-shadow: var(--shadow-md) !important;
}

.accordion-button,
.faq-area .card-header button {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--vb-dark) !important;
  transition: color var(--t-base) !important;
}
.accordion-button:not(.collapsed) {
  color: var(--vb-brown) !important;
  background: var(--vb-cream) !important;
}

/* ─── Classes / Courses ─────────────────────────────────────────── */
.class-item {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) !important;
}
.class-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-xl) !important;
}
.class-img-outer {
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.class-content {
  padding: 32px 28px 24px !important;
}
.class-content h4 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
}

/* ─── SR-UL Feature Items ────────────────────────────────────────  */
.sr-ul li {
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  transition: transform var(--t-base), box-shadow var(--t-base) !important;
}
.sr-ul li:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

.sr-tw-ul li {
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  background: #fff !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform var(--t-base), box-shadow var(--t-base) !important;
}
.sr-tw-ul li:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ─── Off-Canvas ────────────────────────────────────────────────── */
.offcanvas-menu {
  background: linear-gradient(160deg, #1a0d05 0%, #0d0703 100%) !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
}
.offcanvas-menu ul li {
  border-bottom-color: rgba(255,255,255,.07) !important;
}
.offcanvas-menu ul li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: color var(--t-base), padding-left var(--t-base) !important;
}
.offcanvas-menu ul li:hover a {
  padding-left: 8px !important;
  color: var(--vb-gold) !important;
}
.offcanvas-menu form input {
  border-radius: var(--r-sm) !important;
  border-color: rgba(255,255,255,.12) !important;
  font-family: 'Inter', sans-serif !important;
}
.offcanvas-menu form button {
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  background: var(--vb-brown) !important;
}

/* ─── Flip Card ──────────────────────────────────────────────────── */
.flip-card {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
.flip-card-back {
  border-radius: var(--r-lg) !important;
  background: linear-gradient(135deg, var(--vb-brown) 0%, var(--vb-brown-dark) 100%) !important;
}
.flip-card-front {
  border-radius: var(--r-lg) !important;
}

/* ─── Box20 Hover Cards ────────────────────────────────────────── */
.box20 {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}

/* ─── Images ────────────────────────────────────────────────────── */
.hover-zoomin img,
.single-services .services-thumb img,
.class-img-outer img,
.blog-thumb img {
  transition: transform 0.6s var(--ease-out) !important;
}

/* ─── Sinature Box ──────────────────────────────────────────────── */
.sinature-box {
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* ─── Scroll Reveal Animations (CSS-only via Intersection Observer) ─ */
.vb-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}
.vb-reveal.vb-visible {
  opacity: 1;
  transform: translateY(0);
}
.vb-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}
.vb-reveal-left.vb-visible {
  opacity: 1;
  transform: translateX(0);
}
.vb-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}
.vb-reveal-right.vb-visible {
  opacity: 1;
  transform: translateX(0);
}
.vb-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s var(--ease-out),
              transform 0.55s var(--ease-out);
}
.vb-reveal-scale.vb-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.vb-delay-1 { transition-delay: 0.10s !important; }
.vb-delay-2 { transition-delay: 0.20s !important; }
.vb-delay-3 { transition-delay: 0.30s !important; }
.vb-delay-4 { transition-delay: 0.40s !important; }
.vb-delay-5 { transition-delay: 0.50s !important; }
.vb-delay-6 { transition-delay: 0.60s !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vb-reveal, .vb-reveal-left, .vb-reveal-right, .vb-reveal-scale,
  .single-services, .single-team, .pricing-box, .portfolio-box,
  .class-item, .s-single-services, .product, .single-post,
  .feature-box, .sr-ul li, .sr-tw-ul li {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─── Glassmorphism Accent ──────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─── Mean Menu (Mobile Nav) ─────────────────────────────────────── */
.mean-container .mean-nav {
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}
.mean-container .mean-nav ul li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--vb-dark) !important;
  letter-spacing: 0.02em !important;
  border-top-color: rgba(0,0,0,.07) !important;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--vb-brown) !important;
}

/* ─── Responsive Polish ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .slider-content h2 { font-size: 2rem !important; }
  .section-title h2  { font-size: 1.6rem !important; }
  .about-title h2    { font-size: 1.8rem !important; }
  .breadcrumb-title h2 { font-size: 2rem !important; }
  .pricing-box { padding: 32px 24px !important; }
  .services-content { padding: 28px 20px !important; }
  .blog-content { padding: 24px 20px !important; }
  .btn, .ss-btn, .btn.ss-btn {
    padding: 14px 28px !important;
    font-size: 12px !important;
  }
  .single-services:hover,
  .single-team:hover,
  .pricing-box:hover,
  .class-item:hover,
  .s-single-services:hover {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .slider-content h2 { font-size: 1.7rem !important; }
  .about-title h2    { font-size: 1.5rem !important; }
}

/* ─── Shimmer Animation on primary cards ────────────────────────── */
@keyframes vb-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Gradient accent top border for section wrappers */
.services-area::before,
.about-area::before,
.testimonial-area::before {
  display: none !important;
}

/* ─── Section background alternate ──────────────────────────────── */
.gray-bg {
  background: var(--vb-cream) !important;
}

/* ─── Smooth page transitions ────────────────────────────────────── */
.page-wrapper {
  animation: pageEnter 0.4s var(--ease-out) both !important;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Pulse border on video play buttons ────────────────────────── */
.slider-bg .video-i i,
.cta-bg .social .icon {
  animation: vb-pulse 2.5s ease-in-out infinite !important;
}
@keyframes vb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(144,81,15,.4); }
  50%       { box-shadow: 0 0 0 12px rgba(144,81,15,.0); }
}

/* ─── Mobile menu button ─────────────────────────────────────────── */
.menu-area .menu-tigger span {
  background: var(--vb-brown) !important;
  border-radius: var(--r-full) !important;
  height: 2px !important;
}

/* ─── Search top ─────────────────────────────────────────────────── */
.search-top {
  border-radius: var(--r-full) !important;
  border-color: rgba(144,81,15,.3) !important;
}
.search-top ul {
  border-radius: var(--r-full) !important;
}
.search-top2 li {
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t-fast), box-shadow var(--t-base) !important;
}
.search-top2 li:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ─── Instagram Grid ────────────────────────────────────────────── */
.f-insta ul li {
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  transition: transform var(--t-base) !important;
}
.f-insta ul li:hover {
  transform: scale(1.04) !important;
}

/* ─── Opening Time (appointment widget) ─────────────────────────── */
.opening-time {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}

/* ─── Active slick track padding fix ────────────────────────────── */
.services-active .slick-track {
  padding-bottom: 14px !important;
}

/* ─── Gradient text accent ───────────────────────────────────────── */
.section-title h2 span,
.slider-content h2 span,
.about-title h2 span {
  background: linear-gradient(135deg, var(--vb-brown) 0%, var(--vb-gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── Decorative hr ──────────────────────────────────────────────── */
hr {
  border-color: rgba(144,81,15,.12) !important;
}

/* ─── Brand bar ──────────────────────────────────────────────────── */
.brand-area .brand-active {
  border-radius: var(--r-xl) !important;
  background: linear-gradient(90deg, var(--vb-brown) 0%, var(--vb-brown-dark) 100%) !important;
}

/* ─── Back to service / blog links ─────────────────────────────── */
.blog-btn a,
.services-two .s-single-services .btn2 {
  color: var(--vb-brown) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: gap var(--t-base), color var(--t-base) !important;
}
.blog-btn a:hover,
.services-two .s-single-services .btn2:hover {
  color: var(--vb-brown-dark) !important;
  gap: 10px !important;
}

/* ─── Table styling ───────────────────────────────────────────────── */
table { border-radius: var(--r-md) !important; overflow: hidden !important; }
th {
  background: var(--vb-brown) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
td { font-family: 'Inter', sans-serif !important; }
tr:hover td { background: var(--vb-cream) !important; }

/* ─── End modern.css ─────────────────────────────────────────────── */