/* ================================================================
   Clean Modern Overrides (top of file)
   - White background, refined variables
   - Simple responsive layout, sticky header 80px, footer 120px
   - Glass accents kept minimal and optional via `.glass`
   ================================================================ */

:root{
  /* page background: color + optional image
     image path is relative to this CSS file (src/css/) */
  --bg-color: #ffffff; /* white background requested */
  --bg-image: url('../images/background.png'); /* optional, keep but correct path */
  --surface: #ffffff;
  
  /* ========================================
     COLOR TOKEN SET - Easy to tweak!
     ======================================== */
  
  /* Text Colors */
  --c-text: #1a2a3a;              /* Primary text - darker for contrast */
  --c-text-muted: #5a6a7a;        /* Secondary text */
  --c-heading: #0f1f2f;           /* Headlines - darkest */
  
  /* Accent Colors - Warm Sage/Teal (Trust, Calm, Professional) */
  --c-accent: #2a7a72;            /* Primary accent - deeper teal */
  --c-accent-hover: #1f5f58;      /* Accent hover state */
  --c-accent-soft: rgba(42, 122, 114, 0.08); /* Subtle accent bg */
  
  /* Navigation Colors */
  --c-nav-text: #1a2a3a;          /* Nav text */
  --c-nav-hover: #2a7a72;         /* Nav hover */
  --c-nav-active: #2a7a72;        /* Nav active */
  
  /* Focus & Interactive */
  --c-focus: rgba(42, 122, 114, 0.4); /* Focus ring */
  
  /* Legacy mappings (for backward compatibility) */
  --text: var(--c-text);
  --muted: var(--c-text-muted);
  --primary: var(--c-accent);
  --accent: #7ad0c8;
  
  --border: rgba(20,32,43,0.06);
  --shadow: 0 10px 30px rgba(20,32,43,0.06);
  --glass-bg: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.6);
  --radius: 12px;
  --blur: 10px;
  /* Compatibility aliases for liquid-glas.css and inline styles */
  --lg-blur: var(--blur);
  --lg-radius: var(--radius);
  --lg-shadow: var(--shadow);
  --nav-h: 80px;
  --footer-h: 120px;
  --container-w: 1100px;
  --max-width: 1200px;
  --flow-space: 1.05rem;
}

/* ========== DARK MODE ========== */
body.dark-mode {
  --bg-color: #0d1117;
  --bg-image: url('../images/background-dark.png');
  --surface: #161b22;
  
  /* Dark mode color tokens */
  --c-text: #e6edf3;
  --c-text-muted: #9aa5b1;
  --c-heading: #f0f6fc;
  --c-accent: #6dd5c7;
  --c-accent-hover: #8ae8dc;
  --c-accent-soft: rgba(109, 213, 199, 0.12);
  --c-nav-text: #e6edf3;
  --c-nav-hover: #6dd5c7;
  --c-nav-active: #6dd5c7;
  --c-focus: rgba(109, 213, 199, 0.5);
  
  /* Legacy */
  --text: var(--c-text);
  --muted: var(--c-text-muted);
  --primary: var(--c-accent);
  --accent: #7ee8d8;
  --border: rgba(240,246,252,0.1);
  --shadow: 0 10px 30px rgba(0,0,0,0.3);
  --glass-bg: rgba(22,27,34,0.7);
  --glass-border: rgba(240,246,252,0.1);
  /* Liquid glass aliases for dark mode */

  --lg-highlight: rgba(255,255,255,0.1);
  --lg-blur: var(--blur);
  --lg-radius: var(--radius);
  --lg-shadow: var(--shadow);
}

body.dark-mode {
  background-color: var(--bg-color) !important;
  background-image: var(--bg-image) !important;
  color: var(--text);
}

/* Dark mode header - uses liquid glass from liquid-glas.css */

body.dark-mode .brand,
body.dark-mode .site-nav a {
  color: var(--text);
}

body.dark-mode .brand img,
body.dark-mode .footer-logo img {
  filter: invert(1) brightness(2);
}

body.dark-mode .site-nav a:hover,
body.dark-mode .site-nav a.active {
  color: var(--primary);
  background: rgba(88,166,255,0.1);
}

/* Dark mode mobile nav background */
@media (max-width: 768px) {
  body.dark-mode .site-nav {
    background: rgba(13, 17, 23, 0.98);
    border-bottom: 1px solid rgba(240,246,252,0.1);
  }
}

body.dark-mode .nav-toggle .hamburger,
body.dark-mode .nav-toggle .hamburger::before,
body.dark-mode .nav-toggle .hamburger::after {
  background: var(--text);
}

/* Dark mode settings panel - now handled in liquid glass section */

body.dark-mode .settings-header {
  border-bottom: 1px solid rgba(240,246,252,0.1);
}

body.dark-mode .settings-header h3,
body.dark-mode .setting-label {
  color: var(--text);
}

body.dark-mode .settings-close {
  color: var(--muted);
}

body.dark-mode .settings-close:hover {
  background: rgba(88,166,255,0.1);
  color: var(--text);
}

body.dark-mode .setting-item {
  border-bottom-color: rgba(240,246,252,0.08);
}

body.dark-mode .toggle-label {
  color: var(--muted);
}

body.dark-mode .slider {
  background: rgba(88,166,255,0.2);
}

body.dark-mode .settings-toggle {
  background: rgba(88,166,255,0.1);
  color: var(--text);
}

body.dark-mode .settings-toggle:hover {
  background: rgba(88,166,255,0.2);
}

/* Dark mode headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text);
}

/* Dark mode links */
body.dark-mode a {
  color: var(--primary);
}

body.dark-mode a:hover {
  color: var(--accent);
}

/* Dark mode form elements */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
  background: rgba(22,27,34,0.8);
  border-color: rgba(240,246,252,0.15);
  color: var(--text);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
  color: var(--muted);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
  border-color: var(--primary);
  background: rgba(22,27,34,0.95);
  box-shadow: 0 0 0 3px rgba(88,166,255,0.15);
}

body.dark-mode .form-group label {
  color: var(--text);
}

body.dark-mode .btn-submit {
  background: linear-gradient(135deg, var(--primary), #79c0ff);
}

body.dark-mode .btn-submit:hover {
  background: linear-gradient(135deg, #79c0ff, var(--primary));
}

/* Dark mode buttons */
body.dark-mode .btn-primary {
  background: var(--primary);
  color: #0d1117;
}

body.dark-mode .btn-ghost {
  border-color: rgba(240,246,252,0.2);
  color: var(--text);
}

body.dark-mode .btn-ghost:hover {
  background: rgba(240,246,252,0.05);
}

/* Dark mode footer */
body.dark-mode .site-footer {
  background: linear-gradient(180deg, rgba(88,166,255,0.03) 0%, rgba(88,166,255,0.08) 100%);
  border-top-color: rgba(240,246,252,0.1);
}

body.dark-mode .footer-col h4::after {
  background: var(--primary);
}

body.dark-mode .footer-links a,
body.dark-mode .footer-contact li,
body.dark-mode .footer-brand p {
  color: var(--muted);
}

body.dark-mode .footer-links a:hover,
body.dark-mode .footer-contact a:hover {
  color: var(--primary);
}

body.dark-mode .footer-logo span {
  color: var(--text);
}

body.dark-mode .footer-bottom {
  border-top-color: rgba(240,246,252,0.1);
  color: var(--muted);
}

/* Dark mode FAQ */
body.dark-mode .faq-list.glass-container details {
  border-bottom-color: rgba(240,246,252,0.1);
}

body.dark-mode .faq-list.glass-container summary {
  color: var(--text);
}

body.dark-mode .faq-list.glass-container summary::after {
  color: var(--primary);
}

/* Dark mode muted text */
body.dark-mode .muted,
body.dark-mode .lead {
  color: var(--muted);
}

/* Dark mode section dividers */
body.dark-mode .section::before {
  filter: invert(1) opacity(0.3);
}

/* Reset and base */
*{box-sizing:border-box}
html, body { height: 100%; }

/* ========== MOBILE BACKGROUND FIX ==========
   background-attachment:fixed causes extreme blur/zoom on
   mobile browsers (iOS Safari, Chrome Android).
   Fix: Use scroll on mobile + pseudo-element fallback for parallax feel.
   ============================================ */
@media (max-width: 1024px) {
  body {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}
@supports (-webkit-touch-callout: none) {
  /* iOS-specific: always disable fixed attachment */
  body {
    background-attachment: scroll !important;
  }
}

body{
  margin: 0;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;

  background-color: var(--bg-color) !important;
  background-image: var(--bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important; /* Parallax-Effekt */

  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY - Premium Refinements
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-heading);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 500;
}

p {
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* Text on glass containers - subtle shadow for readability on light bg */
.glass-content h1,
.glass-content h2,
.glass-content h3 {
  color: var(--c-heading);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

.glass-content p,
.glass-content li {
  color: var(--c-text);
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* Dark mode glass text - no shadow needed */
body.dark-mode .glass-content h1,
body.dark-mode .glass-content h2,
body.dark-mode .glass-content h3,
body.dark-mode .glass-content p,
body.dark-mode .glass-content li {
  text-shadow: none;
}

img{max-width:100%;height:auto;display:block}

/* Links */
a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--c-accent-hover);
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Container: centered content within full-width sections */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 1.25rem;
}

/* Site main - ensure no width restrictions */
.site-main{
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}

/* Full-width container variant */
.container-fluid{
  width: 100%;
  padding: 1.25rem 2rem;
}

/* Header / Navigation - Transparent initially, Liquid Glass on scroll */
.site-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: box-shadow 0.3s ease;
  border-radius: 0;
  box-shadow: none;
  cursor: grab;
}

/* Override glass-container defaults for nav */
.site-header.glass-container {
  position: fixed !important;
  border-radius: 0;
  box-shadow: none;
  cursor: grab;
}

/* Initially hide glass layers - show on scroll */
.site-header .glass-filter,
.site-header .glass-overlay,
.site-header .glass-specular {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Show glass layers when scrolled */
.site-header.scrolled .glass-filter,
.site-header.scrolled .glass-overlay,
.site-header.scrolled .glass-specular {
  opacity: 1;
}

.site-header.scrolled.glass-container {
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.site-header .glass-overlay {
  background: var(--lg-bg-color);
}

.site-header .glass-specular {
  border-radius: 0;
}

/* Make nav content clickable - override glass-container pointer behavior */
.site-header .glass-content {
  pointer-events: auto;
  cursor: default;
}

.site-header .glass-content a,
.site-header .glass-content button,
.site-header .settings-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10;
}

.site-header .brand {
  cursor: pointer;
}
.site-header .nav-wrap,
.site-header .glass-content.nav-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 2.5rem;
  height: var(--nav-h);
  box-sizing: border-box;
  flex-direction: row;
  gap: 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--c-heading);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}
.brand:hover{ text-decoration: none; opacity: 0.8; }
.brand img{
  height: 54px;
  width: auto;
}
.brand .brand-text{
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Site Navigation - Desktop default */
.site-nav {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-nav ul{
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.site-nav li{
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.site-nav a{
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.875rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-nav-text);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--c-accent);
  transition: width 0.25s ease;
}
.site-nav a:hover{
  color: var(--c-nav-hover);
  text-decoration: none;
  background: var(--c-accent-soft);
}
.site-nav a:hover::after {
  width: 60%;
}

/* Scrollspy Active State - same as hover but persistent */
.site-nav a.active {
  color: var(--c-nav-hover);
  text-decoration: none;
  background: var(--c-accent-soft);
}
.site-nav a.active::after {
  width: 60%;
}

.site-nav a:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}
.site-nav li.sep{ 
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(0,0,0,0.08);
}
.site-nav a.primary{
  background: var(--c-accent);
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 1.2rem;
}
.site-nav a.primary:hover{
  background: var(--c-accent-hover);
}
.site-nav a.primary::after {
  display: none;
}

/* Settings Toggle Button */
.nav-settings{
  margin-left: 0.5rem;
}
.settings-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: var(--c-accent-soft);
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-text);
  transition: all 0.3s ease;
}
.settings-toggle:hover{
  background: rgba(42, 122, 114, 0.15);
  transform: rotate(45deg);
}
.settings-toggle:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.settings-toggle svg{
  transition: transform 0.3s ease;
}

/* Settings Panel - Liquid Glass */
.settings-panel{
  position: fixed;
  top: var(--nav-h);
  right: -320px;
  width: 300px;
  max-height: calc(100vh - var(--nav-h));
  z-index: 99998;
  transition: right 0.3s ease, background 0.4s ease, box-shadow 0.4s ease;
  overflow-y: auto;
  
  /* Liquid Glass Base (Clear) */
  background: transparent;
  box-shadow: 
    -4px 0 30px rgba(0,0,0,0.15),
    0 0 20px rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Settings Panel Glass Layers */
.settings-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  backdrop-filter: blur(0px);
  filter: url(#lg-dist);
  transition: backdrop-filter 0.4s ease, filter 0.4s ease;
}

.settings-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lg-bg-color, rgba(255, 255, 255, 0.3));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.5);
  transition: background 0.4s ease;
}

.settings-panel.active{
  right: 0;
}

/* Settings Panel - Frosted Glass Variant */
body.glass-frosted .settings-panel {
  box-shadow: 
    -8px 0 32px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  border-left: none;
}

body.glass-frosted .settings-panel::before {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  filter: none;
}

body.glass-frosted .settings-panel::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  box-shadow: 
    inset 1px 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0 30px rgba(255, 255, 255, 0.15);
}

/* Dark Mode Settings Panel */
body.dark-mode .settings-panel {
  box-shadow: 
    -4px 0 30px rgba(0,0,0,0.4),
    0 0 20px rgba(0, 0, 0, 0.3);
  border-left-color: rgba(240, 246, 252, 0.1);
}

body.dark-mode .settings-panel::after {
  background: rgba(22, 27, 34, 0.7);
  box-shadow: inset 1px 0 0 rgba(240, 246, 252, 0.1);
}

/* Dark Mode + Frosted */
body.dark-mode.glass-frosted .settings-panel {
  box-shadow: 
    -8px 0 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(240, 246, 252, 0.1);
}

body.dark-mode.glass-frosted .settings-panel::after {
  background: linear-gradient(
    180deg,
    rgba(22, 27, 34, 0.8) 0%,
    rgba(22, 27, 34, 0.6) 50%,
    rgba(22, 27, 34, 0.5) 100%
  );
  box-shadow: 
    inset 1px 0 1px rgba(240, 246, 252, 0.15),
    inset 0 0 30px rgba(240, 246, 252, 0.05);
}

.settings-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(42, 122, 114, 0.1);
  position: relative;
  z-index: 1;
  cursor: grab;
  user-select: none;
}
.settings-header:active{
  cursor: grabbing;
}
body.draggable-disabled .settings-header{
  cursor: default;
}
.settings-header h3{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  color: var(--c-heading);
}
.settings-close{
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.settings-close:hover{
  background: rgba(0,106,113,0.1);
  color: var(--text);
}
.settings-options{
  padding: 1rem 1.5rem;
  position: relative;
  z-index: 1;
}
.setting-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,106,113,0.08);
}
.setting-item:last-child{
  border-bottom: none;
}
.setting-label{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}
.setting-label svg{
  color: var(--c-accent);
}
.toggle-switch{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.toggle-label{
  font-size: 0.8rem;
  color: var(--c-text-muted);
  min-width: 28px;
  text-align: center;
}

/* Toggle Switch Slider */
.switch{
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(42, 122, 114, 0.2);
  border-radius: 24px;
  transition: 0.3s ease;
}
.slider::before{
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: 0.3s ease;
}
.switch input:checked + .slider{
  background: var(--c-accent);
}
.switch input:checked + .slider::before{
  transform: translateX(20px);
}

/* Theme Toggle - Special styling with icon on knob */
.switch.switch-theme {
  width: 56px;
  height: 28px;
}

.slider.slider-theme {
  background: linear-gradient(135deg, #87CEEB 0%, #FFD700 100%);
  border-radius: 28px;
}

.slider.slider-theme::before {
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  z-index: 2;
}

.switch.switch-theme input:checked + .slider.slider-theme {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.switch.switch-theme input:checked + .slider.slider-theme::before {
  transform: translateX(28px);
  background: #2d3748;
}

/* Icons on the knob - centered */
.slider-icon {
  position: absolute;
  top: 50%;
  font-size: 12px;
  line-height: 1;
  z-index: 3;
  transition: opacity 0.3s ease, left 0.3s ease;
  pointer-events: none;
}

.slider-icon-sun {
  left: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 1;
}

.slider-icon-moon {
  left: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 0;
}

.switch.switch-theme input:checked + .slider .slider-icon-sun {
  opacity: 0;
  left: 31px;
}

.switch.switch-theme input:checked + .slider .slider-icon-moon {
  opacity: 1;
  left: 31px;
}

/* Liquid Glass Toggle - Special styling with icon on knob */
.switch.switch-glass {
  width: 56px;
  height: 28px;
}

.slider.slider-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(200,220,255,0.8) 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.slider.slider-glass::before {
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
}

.switch.switch-glass input:checked + .slider.slider-glass {
  background: linear-gradient(135deg, rgba(180,200,255,0.7) 0%, rgba(150,180,230,0.8) 100%);
}

.switch.switch-glass input:checked + .slider.slider-glass::before {
  transform: translateX(28px);
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(200,210,240,0.9));
}

/* Icons on the glass knob - centered */
.slider-icon-clear {
  left: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 0;
}

.slider-icon-frosted {
  left: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 1;
}

.slider-icon-clear img,
.slider-icon-frosted img {
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
}

.switch.switch-glass input:checked + .slider .slider-icon-clear {
  opacity: 1;
  left: 31px;
}

.switch.switch-glass input:checked + .slider .slider-icon-frosted {
  opacity: 0;
  left: 31px;
}

/* Glass Transition Flash Overlay */
.glass-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.glass-flash.active {
  opacity: 1;
}

.glass-flash.clear-to-frosted {
  background: radial-gradient(circle at center, rgba(180,200,255,0.3) 0%, rgba(150,180,230,0.2) 100%);
}

.glass-flash.frosted-to-clear {
  background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.2) 100%);
}

/* Language Toggle - Special styling with flag on knob */
.switch.switch-lang {
  width: 56px;
  height: 28px;
}

.slider.slider-lang {
  background: linear-gradient(135deg, #000 0%, #DD0000 50%, #FFCC00 100%);
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.slider.slider-lang::before {
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
}

.switch.switch-lang input:checked + .slider.slider-lang {
  background: linear-gradient(135deg, #012169 0%, #C8102E 50%, #FFFFFF 100%);
}

.switch.switch-lang input:checked + .slider.slider-lang::before {
  transform: translateX(28px);
}

/* Flag icons on the lang knob - centered */
.slider-icon-de {
  left: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 1;
}

.slider-icon-en {
  left: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  opacity: 0;
}

.slider-icon-de svg,
.slider-icon-en svg {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.switch.switch-lang input:checked + .slider .slider-icon-de {
  opacity: 0;
  left: 31px;
}

.switch.switch-lang input:checked + .slider .slider-icon-en {
  opacity: 1;
  left: 31px;
}

/* Language Transition Flash Overlay */
.lang-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.lang-flash.active {
  opacity: 1;
}

.lang-flash.de-to-en {
  background: radial-gradient(circle at center, rgba(200,16,46,0.2) 0%, rgba(1,33,105,0.15) 100%);
}

.lang-flash.en-to-de {
  background: radial-gradient(circle at center, rgba(255,204,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
}

/* ========================================
   TOAST / ALERT SYSTEM - Liquid Glass
   ======================================== */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
  max-width: 400px;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  padding-right: 44px;
  min-width: 300px;
  max-width: 400px;
  border-radius: 2rem;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  
  /* Always white text for readability */
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  
  /* Liquid Glass Base (Clear) - matching glass-container */
  background: transparent;
  border: none;
  box-shadow: 
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.1);
  
  /* Animation */
  opacity: 0;
  transform: translateX(100%) scale(0.9);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast:active {
  cursor: grabbing;
}
body.draggable-disabled .toast {
  cursor: default;
}

/* Toast Glass Layers */
.toast::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  backdrop-filter: blur(0px);
  filter: url(#lg-dist);
  transition: backdrop-filter 0.4s ease, filter 0.4s ease;
}

.toast::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lg-bg-color, rgba(255, 255, 255, 0.3));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  transition: background 0.4s ease;
}

/* Toast - Frosted Glass Variant */
body.glass-frosted .toast {
  border-radius: 1.5rem;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

body.glass-frosted .toast::before {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  filter: none;
}

body.glass-frosted .toast::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05),
    inset 0 0 30px rgba(255, 255, 255, 0.15);
}

/* Dark Mode Toast */
body.dark-mode .toast {
  box-shadow: 
    0 6px 6px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .toast::after {
  background: rgba(22, 27, 34, 0.7);
  box-shadow: inset 1px 1px 0 rgba(240, 246, 252, 0.1);
}

/* Dark Mode + Frosted Toast */
body.dark-mode.glass-frosted .toast {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(240, 246, 252, 0.1);
}

body.dark-mode.glass-frosted .toast::after {
  background: linear-gradient(
    135deg,
    rgba(22, 27, 34, 0.8) 0%,
    rgba(22, 27, 34, 0.6) 50%,
    rgba(22, 27, 34, 0.5) 100%
  );
  box-shadow: 
    inset 0 1px 1px rgba(240, 246, 252, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(240, 246, 252, 0.05);
}

.toast--show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast--hide {
  opacity: 0;
  transform: translateX(100%) scale(0.9);
  transition: all 0.3s ease-out;
}

/* Toast Icon */
.toast__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

/* Toast Content */
.toast__content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.toast__title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.toast__message {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* Toast Close Button */
.toast__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.toast__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

/* Progress Bar */
.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  border-radius: 0 0 2rem 2rem;
  opacity: 0.5;
  transition: width linear;
  z-index: 1;
}

/* ========================================
   TOAST VARIANTS - Color Tints
   ======================================== */

/* Success - Green Tint */
.toast--success::after {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.2) 100%);
}
body.glass-frosted .toast--success::after {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(22, 163, 74, 0.25) 50%, rgba(34, 197, 94, 0.15) 100%);
}

.toast--success .toast__icon {
  background: rgba(34, 197, 94, 0.4);
  color: #fff;
}

.toast--success .toast__progress {
  background: #22c55e;
}

/* Error - Red Tint */
.toast--error::after {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%);
}
body.glass-frosted .toast--error::after {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(220, 38, 38, 0.25) 50%, rgba(239, 68, 68, 0.15) 100%);
}

.toast--error .toast__icon {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
}

.toast--error .toast__progress {
  background: #ef4444;
}

/* Warning - Yellow/Orange Tint */
.toast--warning::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.2) 100%);
}
body.glass-frosted .toast--warning::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(217, 119, 6, 0.25) 50%, rgba(245, 158, 11, 0.15) 100%);
}

.toast--warning .toast__icon {
  background: rgba(245, 158, 11, 0.4);
  color: #fff;
}

.toast--warning .toast__progress {
  background: #f59e0b;
}

/* Info - Blue Tint */
.toast--info::after {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%);
}
body.glass-frosted .toast--info::after {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(37, 99, 235, 0.25) 50%, rgba(59, 130, 246, 0.15) 100%);
}

.toast--info .toast__icon {
  background: rgba(59, 130, 246, 0.4);
  color: #fff;
}

.toast--info .toast__progress {
  background: #3b82f6;
}

/* ========================================
   DARK MODE TOAST VARIANT TINTS
   ======================================== */

body.dark-mode .toast--success::after {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 27, 34, 0.6) 100%);
}
body.dark-mode.glass-frosted .toast--success::after {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(22, 163, 74, 0.2) 50%, rgba(22, 27, 34, 0.5) 100%);
}

body.dark-mode .toast--success .toast__icon {
  background: rgba(34, 197, 94, 0.35);
  color: #fff;
}

body.dark-mode .toast--error::after {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(22, 27, 34, 0.6) 100%);
}
body.dark-mode.glass-frosted .toast--error::after {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(220, 38, 38, 0.2) 50%, rgba(22, 27, 34, 0.5) 100%);
}

body.dark-mode .toast--error .toast__icon {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
}

body.dark-mode .toast--warning::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(22, 27, 34, 0.6) 100%);
}
body.dark-mode.glass-frosted .toast--warning::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.2) 50%, rgba(22, 27, 34, 0.5) 100%);
}

body.dark-mode .toast--warning .toast__icon {
  background: rgba(245, 158, 11, 0.35);
  color: #fff;
}

body.dark-mode .toast--info::after {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(22, 27, 34, 0.6) 100%);
}
body.dark-mode.glass-frosted .toast--info::after {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(37, 99, 235, 0.2) 50%, rgba(22, 27, 34, 0.5) 100%);
}

body.dark-mode .toast--info .toast__icon {
  background: rgba(59, 130, 246, 0.35);
  color: #fff;
}

body.dark-mode .toast__close {
  background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .toast__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   RESPONSIVE TOAST
   ======================================== */

@media (max-width: 480px) {
  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
  
  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* Theme Transition Flash Overlay */
.theme-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.theme-flash.active {
  opacity: 1;
}

.theme-flash.light-to-dark {
  background: radial-gradient(circle at center, rgba(22,33,62,0.4) 0%, rgba(13,17,23,0.6) 100%);
}

.theme-flash.dark-to-light {
  background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(135,206,235,0.3) 100%);
}

.nav-toggle{
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle .hamburger{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  position: relative;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--text);
}
.nav-toggle .hamburger::before{ top: -7px; }
.nav-toggle .hamburger::after{ top: 7px; }

/* Hero - starts at top, nav floats over it */
.hero{
  min-height: 100vh;
  min-height: 114dvh;
  display: flex;
  align-items: flex-start;
  background: transparent !important;
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + 12rem);
  padding-bottom: 6rem;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 2.5rem;
  align-items: start;
}
.hero-copy{
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}
.hero-card{
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}

/* Hero Typography - Premium hierarchy */
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  color: var(--c-heading);
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

.lead {
  color: var(--c-text-muted);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}

.muted {
  color: var(--c-text-muted);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Hero CTAs */
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Glass card (subtle)
   Add `.glass` where needed; otherwise keep surfaces flat */
.glass{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:var(--radius);backdrop-filter: blur(var(--blur));padding:1rem;}

/* Cards / Grid */
.cards{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
.card{padding:1rem;background:transparent}

.profile{display:grid;grid-template-columns:280px 1fr 320px;gap:1rem;align-items:start}

/* Portrait Image in Profile */
.profile-portrait{max-width:280px}
.profile-portrait .glass-content{padding:0.5rem}
.portrait-img{width:100%;height:auto;border-radius:12px;object-fit:cover;display:block}

/* Gallery with hover descriptions */
.gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery-item{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  aspect-ratio: 3/2;
}
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.gallery-item:hover img{
  transform: scale(1.08);
  filter: brightness(0.85);
}
.gallery-item figcaption{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.gallery-item:hover figcaption{
  transform: translateY(0);
}

/* ============================================
   Praxis Section — Grid + Collapsible Map
   ============================================ */
.praxis-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.map-collapsible{overflow:hidden}
.map-toggle{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  border: none;
  background: transparent;
  color: var(--c-text, inherit);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}
.map-toggle:hover{
  color: var(--c-accent, #2a7a72);
}
.map-chevron{
  margin-left: auto;
  transition: transform 0.3s ease;
}
.map-toggle[aria-expanded="true"] .map-chevron{
  transform: rotate(180deg);
}
.map-embed{
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.map-embed iframe{
  width: 100%;
  height: 350px;
  border: none;
  border-radius: 8px;
  margin-top: 0.5rem;
}
.map-privacy-note{
  padding: 0 1rem 0.5rem;
  margin: 0;
  opacity: 0.7;
}
.map-privacy-note a{
  color: var(--c-accent, #2a7a72);
}
@media (max-width: 768px){
  .praxis-grid{grid-template-columns:1fr}
  .map-embed iframe{height:280px}
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.active{
  opacity: 1;
  visibility: visible;
}
.lightbox-content{
  max-width: 90vw;
  max-height: 85vh;
  text-align: center;
}
.lightbox-content img{
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-caption{
  color: #fff;
  font-size: 1.1rem;
  margin-top: 1rem;
  opacity: 0.9;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  background: rgba(255,255,255,0.25);
}
.lightbox-close{
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2.5rem;
  padding: 0.25rem 0.75rem;
}
.lightbox-prev{
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next{
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Contact Section */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.contact-card{
  max-width: none;
  padding: 2rem;
}
.contact-card h3{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text);
}

/* Contact Form Styling */
.contact-form{
  padding: 2rem;
}
.contact-form h3{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.form-group{
  margin-bottom: 1.25rem;
}
.form-group label{
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.form-group input,
.form-group select,
.form-group textarea{
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,106,113,0.2);
  border-radius: 8px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color: rgba(58,62,65,0.5);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--primary);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 3px rgba(0,106,113,0.1);
}
.form-group select{
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23006a71' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-group textarea{
  resize: vertical;
  min-height: 120px;
}
.btn-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 2rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #008a92);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,106,113,0.3);
  background: linear-gradient(135deg, #005a60, var(--primary));
}
.btn-submit:active{
  transform: translateY(0);
}

/* Privacy Checkbox */
.form-group-privacy{
  margin-top: 0.5rem;
}
.privacy-label{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}
.privacy-label input[type="checkbox"]{
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.privacy-label a{
  color: var(--primary);
  text-decoration: underline;
}

/* Responsive Contact Form */
@media (max-width: 768px){
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.faq-list details{margin-bottom:.6rem}

/* Sections: full width and full viewport height like hero */
.section{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  padding-top: 6rem;
  background: transparent !important;
  background-attachment: initial !important;
  position: relative;
}

/* Decorative flourish divider at top of sections */
.section::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none' fill='none'%3E%3C!-- Main continuous elegant wave --%3E%3Cpath d='M0 15 Q100 8 200 15 T400 15 T600 15 T800 15 T1000 15 T1200 15' stroke='%23000' stroke-width='2' fill='none' opacity='0.6'/%3E%3C!-- Mirrored lower wave --%3E%3Cpath d='M0 15 Q100 22 200 15 T400 15 T600 15 T800 15 T1000 15 T1200 15' stroke='%23000' stroke-width='2' fill='none' opacity='0.6'/%3E%3C!-- Delicate inner accent --%3E%3Cpath d='M0 15 Q100 11 200 15 T400 15 T600 15 T800 15 T1000 15 T1200 15' stroke='%23000' stroke-width='1.2' fill='none' opacity='0.35'/%3E%3Cpath d='M0 15 Q100 19 200 15 T400 15 T600 15 T800 15 T1000 15 T1200 15' stroke='%23000' stroke-width='1.2' fill='none' opacity='0.35'/%3E%3C!-- Central ornament --%3E%3Ccircle cx='600' cy='15' r='5' fill='%23000' opacity='0.55'/%3E%3Ccircle cx='600' cy='15' r='2.5' fill='%23fff'/%3E%3C!-- Side accents --%3E%3Ccircle cx='400' cy='15' r='3' fill='%23000' opacity='0.4'/%3E%3Ccircle cx='800' cy='15' r='3' fill='%23000' opacity='0.4'/%3E%3Ccircle cx='200' cy='15' r='2' fill='%23000' opacity='0.3'/%3E%3Ccircle cx='1000' cy='15' r='2' fill='%23000' opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* Alternative: subtle line with ornament for smaller screens */
@media (max-width: 480px) {
  .section::before {
    height: 35px;
  }
}

.section .container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 2rem;
}

/* Section headings - clear hierarchy */
.section h2 {
  color: var(--c-heading);
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}
.section h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  border-radius: 2px;
}

.section .container.glass{
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
}

/* Footer */
.site-footer{
  background: linear-gradient(180deg, rgba(42, 122, 114, 0.03) 0%, rgba(42, 122, 114, 0.08) 100%);
  border-top: 1px solid rgba(42, 122, 114, 0.15);
  padding: 0;
  margin-top: 2rem;
}
.footer-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 1.5rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.footer-col h4{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-heading);
  margin-bottom: 1.25rem;
  position: relative;
}
.footer-col h4::after{
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.footer-brand{
  padding-right: 2rem;
}
.footer-logo{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1rem;
}
.footer-logo img{
  height: 45px;
  width: auto;
}
.footer-logo span{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--c-heading);
}
.footer-brand p{
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-text-muted);
  margin: 0;
}
.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li{
  margin-bottom: 0.6rem;
}
.footer-links a{
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}
.footer-links a:hover{
  color: var(--c-accent);
  padding-left: 4px;
}
.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact li{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--c-text-muted);
}
.footer-contact li svg{
  flex-shrink: 0;
  color: var(--c-accent);
  margin-top: 2px;
}
.footer-contact a{
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact a:hover{
  color: var(--c-accent);
}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(42, 122, 114, 0.1);
  font-size: 0.9rem;
  color: var(--c-text-muted);
}
.footer-bottom .heart{
  color: #e25555;
  display: inline-block;
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
}
.made-with{
  font-size: 0.85rem;
}

/* Footer Responsive */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand{
    grid-column: span 2;
    padding-right: 0;
  }
}
@media (max-width: 600px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-brand{
    grid-column: span 1;
  }
  .footer-bottom{
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

.footer-inner{display:flex;justify-content:space-between;width:100%;align-items:center;padding:1rem}

/* ========================================
   BUTTONS - Premium Styling
   ======================================== */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-hover) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(42, 122, 114, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--c-accent-hover) 0%, #1a4f49 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 122, 114, 0.35);
  text-decoration: none;
  color: #fff;
}
.btn-primary:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(42, 122, 114, 0.2);
  color: var(--c-accent);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--c-accent);
  color: var(--c-accent-hover);
  text-decoration: none;
}
.btn-ghost:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Form Submit Button */
.btn-submit {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-hover) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(42, 122, 114, 0.25);
}
.btn-submit:hover {
  background: linear-gradient(135deg, var(--c-accent-hover) 0%, #1a4f49 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 122, 114, 0.35);
}
.btn-submit:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Utilities */
h1,h2,h3{margin:0 0 0.5rem 0}

/* Responsive */
@media (min-width:768px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1100px){
  .cards{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:768px){
  .hero-inner{grid-template-columns:1fr}
  .profile{grid-template-columns:1fr}
  .profile-portrait{max-width:200px;margin:0 auto}
  .gallery{grid-template-columns:repeat(1,1fr)}
  .gallery-item figcaption{
    transform: translateY(0);
    padding: 0.75rem 0.5rem 0.5rem;
    font-size: 0.8rem;
  }
  .lightbox-prev,
  .lightbox-next{
    padding: 0.4rem 0.8rem;
    font-size: 1.5rem;
  }
  .lightbox-prev{ left: 0.5rem; }
  .lightbox-next{ right: 0.5rem; }
}

/* ============================================
   MOBILE OPTIMIZATION — Comprehensive Fixes
   ============================================ */

/* Medium screens: hero and profile break earlier */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-copy {
    position: static;
  }
  .hero-card {
    position: static;
    max-width: 480px;
  }
  .profile {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .profile-portrait {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* Tablet: reduce nav padding */
@media (max-width: 992px) {
  .site-header .nav-wrap,
  .site-header .glass-content.nav-wrap {
    padding: 0 1rem;
  }
}

/* Small mobile: full-width settings panel, compact hero */
@media (max-width: 480px) {
  .site-header .nav-wrap,
  .site-header .glass-content.nav-wrap {
    padding: 0 0.75rem;
  }
  .settings-panel {
    width: 100vw;
    right: -110vw;
    border-left: none;
    border-radius: 0;
  }
  .settings-panel.active {
    right: 0;
  }
  .hero {
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 3rem;
  }
  .hero h1 {
    font-size: 1.65rem;
  }
  .lead {
    font-size: 0.95rem;
  }
  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .btn {
    width: 100%;
    text-align: center;
  }
  .section {
    padding: 2rem 0;
    padding-top: 4rem;
  }
  .section .container {
    padding: 1rem;
  }
  .cards {
    gap: 0.75rem;
  }
  .card {
    padding: 0.75rem;
  }
  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* Navigation - Responsive scaling for medium screens */
@media (max-width: 1400px) {
  .site-nav a {
    padding: 0 0.6rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 1280px) {
  .site-nav ul {
    gap: 0.1rem;
  }
  .site-nav a {
    padding: 0 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

@media (max-width: 1150px) {
  .site-nav a {
    padding: 0 0.35rem;
    font-size: 0.68rem;
    letter-spacing: 0.01em;
  }
  .site-nav ul {
    gap: 0;
  }
}

@media (max-width: 1050px) {
  .site-nav a {
    padding: 0 0.28rem;
    font-size: 0.62rem;
    letter-spacing: 0;
  }
  /* Hide separator line on small screens */
  .site-nav li.sep {
    margin-left: 0.15rem;
    padding-left: 0.15rem;
  }
}

@media (max-width: 1000px) {
  .site-nav a {
    padding: 0 0.22rem;
    font-size: 0.58rem;
  }
}

/* Mobile Navigation - 992px and below */
@media (max-width: 992px) {
  .site-nav{
    position: absolute;
    top: calc(var(--nav-h) + 0.5rem);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  
    
    
    /* LIQUID GLASS BACKGROUND */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    /* Glass Border & Shadow */
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.25rem;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.15),
      0 4px 12px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    
    padding: 0.75rem;
    display: none;
    z-index: 99997;
  }
  .site-nav.active{ 
    display: block !important; 
  }
  .site-nav ul{
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0.75rem;
    position: relative;
    overflow: hidden;
    
    /* LIQUID GLASS - identisch zu .glass-container */
    background: transparent;
    border-radius: 2rem;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
  }
  
  /* Glass Filter Layer */
  .site-nav ul::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    filter: url(#lg-dist);
    isolation: isolate;
    border-radius: inherit;
    pointer-events: none;
  }
  
  /* Glass Overlay Layer */
  .site-nav ul::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--lg-bg-color, rgba(255, 255, 255, 0.25));
    border-radius: inherit;
    pointer-events: none;
    /* Specular highlights */
    box-shadow: 
      inset 1px 1px 0 var(--lg-highlight, rgba(255, 255, 255, 0.6)),
      inset 0 0 5px var(--lg-highlight, rgba(255, 255, 255, 0.4));
  }
  
  /* Ensure content is above glass layers */
  .site-nav ul li {
    position: relative;
    z-index: 2;
  }
  
  /* ========== FROSTED GLASS VARIANT ========== */
  body.glass-frosted .site-nav ul {
    border-radius: 1.5rem;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.2);
  }
  
  body.glass-frosted .site-nav ul::before {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    filter: none;
  }
  
  body.glass-frosted .site-nav ul::after {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.1) 100%
    );
    box-shadow: 
      inset 0 1px 1px rgba(255, 255, 255, 0.8),
      inset 0 -1px 1px rgba(0, 0, 0, 0.05),
      inset 0 0 30px rgba(255, 255, 255, 0.15);
  }
  
  /* ========== DARK MODE - LIQUID GLASS ========== */
  body.dark-mode .site-nav ul {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
  }
  
  body.dark-mode .site-nav ul::after {
    background: rgba(22, 27, 34, 0.6);
    box-shadow: 
      inset 1px 1px 0 rgba(240, 246, 252, 0.1),
      inset 0 0 5px rgba(240, 246, 252, 0.05);
  }
  
  /* ========== DARK MODE + FROSTED GLASS ========== */
  body.dark-mode.glass-frosted .site-nav ul {
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(240, 246, 252, 0.1);
  }
  
  body.dark-mode.glass-frosted .site-nav ul::after {
    background: linear-gradient(
      135deg,
      rgba(22, 27, 34, 0.7) 0%,
      rgba(22, 27, 34, 0.5) 50%,
      rgba(22, 27, 34, 0.4) 100%
    );
    box-shadow: 
      inset 0 1px 1px rgba(240, 246, 252, 0.15),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2),
      inset 0 0 30px rgba(240, 246, 252, 0.05);
  }
  .site-nav li {
    width: 100%;
  }
  .site-nav a{
    display: block;
    padding: 0.5rem 0.75rem;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    transition: background 0.15s ease;
  }
  .site-nav a:hover,
  .site-nav a.active {
    background: rgba(255, 255, 255, 0.5);
  }
  .nav-toggle{ 
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    z-index: 99999;
    position: relative;
  }
  
  /* Dark Mode Mobile Nav */
  body.dark-mode .site-nav {
    background: rgba(22, 27, 34, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  body.dark-mode .site-nav a:hover,
  body.dark-mode .site-nav a.active {
    background: rgba(255, 255, 255, 0.1);
  }
}

@media (max-width:768px){
  .gallery img{height:130px}
}

/* Accessibility focus */
a:focus,button:focus{outline:3px solid rgba(0,106,113,0.12);outline-offset:2px}

/* End of clean overrides — the rest of the file contains legacy theme rules kept for compatibility.
   These overrides are intentionally placed at the top so they take precedence.
*/

/* --------------------------------------------------------------------------
   1) Fonts / logo (from file 1)
   -------------------------------------------------------------------------- */
@font-face{font-family:"RaraThemeFont";src:url("../fonts/7d895c475b036f1d87d8644ec8771708.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RaraThemeFont";src:url("../fonts/7d895c475b036f1d87d8644ec8771708-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

.rara-logo{font-family:"RaraThemeFont",sans-serif}

/* --------------------------------------------------------------------------
   2) Small custom button (from file 2)
   -------------------------------------------------------------------------- */
.rara-classic-btn{display:inline-block;padding:10px 20px;background:#7fa200;color:#fff;border-radius:3px}
.rara-classic-btn:hover{background:#6e8a00}

/* --------------------------------------------------------------------------
   3) Presets + utilities (from file 3)
   NOTE: kept as-is; plus added aliases so it plays nice with theme vars.
   -------------------------------------------------------------------------- */
:root{
  --preset-1:#7fa200;
  --preset-2:#72466a;
  --preset-3:#ffffff;

  /* aliases (safe): make preset vars available under theme naming too */
  --primary-color: var(--primary-color, var(--preset-1));
  --heading-color: var(--heading-color, var(--preset-2));
}

.has-global-padding{padding:20px}
.has-global-margin{margin:20px}
.has-primary-color{color:var(--preset-1)}
.has-secondary-color{color:var(--preset-2)}

/* additional preset utility classes used by theme blocks */
.wp-block-button .wp-block-button__link{border-radius:4px}

/* ==========================================================================
   4) THEME STYLES (from file 6)  <-- PARTIAL (your input is truncated)
   Keep everything exactly, only reorganized into one file.
   ========================================================================== */

/*
Theme Name: Spa and Salon
Theme URI: https://rarathemes.com/wordpress-themes/spa-and-salon/
Author: Rara Theme
Author URI: https://rarathemes.com/
Description: Spa and Salon is an elegantly designed theme suitable for spa, salons, beauty, care, girly, hair, health, hospitality, massage, medical, parlor, physiotherapy, wellness, yoga, health blog and various types of business websites. Spa and Salon comes with several features to make a user-friendly, interactive and visually stunning website. Such features include custom menu, attractive Banner with a Call to Action button, service section, testimonial section, about section, Header Phone number display, breadcrumbs, and social media integration. It has three footer area and a right sidebar and includes four custom widgets for the recent posts, popular posts, social media and the featured post. The theme is built on Customizer and it allows you to easily customize your website with live previews. The theme is rigorously tested and optimized for speed and faster page load time and has a secure and clean code. The theme is also translation ready. Designed with visitor engagement in mind, Spa and Salon helps you to easily and intuitively create professional and appealing websites. Check demo at https://rarathemes.com/previews/?theme=spa-and-salon and documentation at https://docs.rarathemes.com/docs/spa-and-salon/. Read theme details at https://rarathemes.com/wordpress-themes/spa-and-salon/ and get free support at https://rarathemes.com/support-ticket/.
Version: 1.3.1
Requires at least: 6.2
Requires PHP: 7.3
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spa-and-salon
Tags: two-columns, right-sidebar, custom-background, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready, theme-options, footer-widgets, blog, full-width-template, custom-logo, custom-colors, e-commerce, holiday
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Spa and Salon WordPress Theme, Copyright Rara Theme 2015, Raratheme.com
Spa and Salon WordPress Theme is distributed under the terms of the GPLv2 or later

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

:root {
  --primary-color: #7fa200;
  --primary-color-rgb: 127, 162, 0;
  --heading-color: #72466a;
  --heading-color-rgb: 114, 70, 106;
  --font-color: #666;
  --font-color-rgb: 102, 102, 102;
  --font-color-dark: #333;
  --font-color-dark-rgb: 51, 51, 51;
  --background-color: #ab5da5;
  --background-color-rgb: 171, 93, 165;
  --primary-font: "Lato", sans-serif;
  --title-font: "Marcellus", serif;

  /* aliases (safe): map theme vars to your preset vars when useful */
  --preset-1: var(--preset-1, var(--primary-color));
  --preset-2: var(--preset-2, var(--heading-color));
  --preset-3: var(--preset-3, #ffffff);
}

html {
  font-family: "PT Serif", serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body { margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { display: block; }

audio,
canvas,
progress,
video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden],
template { display: none; }

a {
  text-decoration: none;
  color: #bbbcc1;
  outline: none;
}

a:active,
a:hover {
  text-decoration: underline;
  color: #bbbcc1;
}

a:focus { outline: none; }

abbr[title] { border-bottom: 1px dotted; }

b,
strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button { overflow: visible; }
button,
select { text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] { cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend { border: 0; padding: 0; }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }

td,
th { padding: 0; }

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  color: var(--font-color);
  font-family: var(--primary-font);
  font-size: 18px;
  line-height: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6 { clear: both; margin-top: 0; }

p { margin-bottom: 1.5em; margin-top: 0; }

dfn,
cite,
em,
i { font-style: italic; }

blockquote { margin: 0 1.5em; }

address { margin: 0 0 1.5em; }

pre {
  background: #f7f7f7;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 0.9375rem;
}

abbr,
acronym {
  border-bottom: 1px dotted var(--font-color);
  cursor: help;
}

mark,
ins { background: #fff9c0; text-decoration: none; }

big { font-size: 125%; }

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  color: var(--font-color);
  font: 18px/30px var(--primary-font);
  /* background removed - using top-level body styles */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; }

blockquote,
q { quotes: """"; }

hr {
  background-color: #e8e8e8;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
  margin-top: 0;
}

ul,
ol { margin: 0 0 1.5em 3em; }

ul { list-style: disc; }
ol { list-style: decimal; }

li>ul,
li>ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt { font-weight: bold; }

dd { margin: 0 1.5em 1.5em; }

img {
  height: auto;
  max-width: 100%;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 15px 17px rgba(255,255,255,.5),
    inset 0 -5px 12px rgba(0,0,0,.05);
  color: rgba(0,0,0,.8);
  font-size: 12px;
  font-size: .75rem;
  line-height: 1;
  padding: .6em 1em .4em;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 15px 17px rgba(255,255,255,.8),
    inset 0 -5px 12px rgba(0,0,0,.02);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  border-color: #aaa #bbb #bbb;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.5),
    inset 0 2px 5px rgba(0,0,0,.15);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus { outline: thin dotted; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  color: var(--font-color);
  border: 1px solid #ccc;
  border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  color: #111;
  outline: thin dotted;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] { padding: 3px; }

textarea { padding-left: 3px; width: 100%; }

/*--------------------------------------------------------------
# Navigation - Links
--------------------------------------------------------------*/
a { color: var(--primary-color); }

a:hover,
a:focus {
  color: var(--primary-color);
  text-decoration: underline;
}

a:focus { outline: thin dotted; }

a:hover,
a:active { outline: none; }

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation { margin: -48px 0 0; }

.main-navigation ul {
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  margin: 0;
  padding: 0;
}

.main-navigation ul li {
  display: inline-block;
  margin: 0 29px;
  position: relative;
}

.main-navigation ul li a {
  display: block;
  color: #533537;
  padding-bottom: 25px;
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
  text-decoration: none;
  color: var(--primary-color);
}

.main-navigation li:hover>a,
.main-navigation li.focus>a { color: var(--primary-color); }

.main-navigation ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: #fff;
  text-align: left;
  margin-left: -99999px;
  z-index: 1;
}

.main-navigation ul ul li {
  display: block;
  margin: 0;
  border-bottom: 1px solid #f2f2f2;
}

.main-navigation ul ul li a { display: block; padding: 15px 20px; }

.main-navigation ul ul a:hover,
.main-navigation ul ul li.focus a,
.main-navigation ul ul a:focus,
.main-navigation ul ul li:hover>a {
  text-decoration: none;
  color: #533537;
  background: #f2f2f2;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li:focus-within>ul,
.main-navigation ul li.focus>ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  margin-left: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li:focus-within>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
  top: 0;
}

.main-navigation .current_page_item>a,
.main-navigation .current-menu-item>a,
.main-navigation .current_page_ancestor>a,
.main-navigation .current-menu-ancestor>a { color: var(--primary-color); }

.main-navigation ul li.menu-item-has-children::after {
  background-color: #533537;
  position: absolute;
  content: '';
  height: 7px;
  width: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L5 5L1 1' stroke='%2339433F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L5 5L1 1' stroke='%2339433F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  top: 20%;
  right: -18px;
}

.main-navigation ul li.menu-item-has-children:hover::after { background-color: var(--primary-color); }

.main-navigation ul li ul li.menu-item-has-children::after {
  top: 50%;
  right: 7%;
  transform: translateY(-50%) rotate(-90deg);
}

.main-navigation ul li ul li.menu-item-has-children:hover::after { background-color: #533537; }

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

#content[tabindex="-1"]:focus { outline: 0; }

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft { display: inline; float: left; margin-right: 1.5em; margin-top: 15px; }
.alignright { display: inline; float: right; margin-left: 1.5em; margin-top: 15px; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after { clear: both; }

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget { margin: 0 0 1.5em; }
.widget.widget_text a{ text-decoration: underline; }
.widget select { max-width: 100%; }

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.sticky { display: block; }

.hentry { margin: 0 0 1.5em; }

.byline,
.updated:not(.published) { display: none; }

.single .byline,
.group-blog .byline { display: inline; }

.page-content,
.entry-content,
.entry-summary { margin: 1.5em 0 0; }

.page-links { clear: both; margin: 0 0 1.5em; }

.blog .format-aside .entry-title,
.archive .format-aside .entry-title { display: none; }

.comment-content a { word-wrap: break-word; }

.bypostauthor { display: block; }

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }

.infinity-end.neverending .site-footer { display: block; }

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

embed,
iframe,
object { max-width: 100%; }

.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text { margin: 0.8075em 0; }
.wp-caption-text { text-align: center; }

svg.fallback-svg { vertical-align: top; }

.gallery { margin-bottom: 1.5em; }

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66%; }
.gallery-columns-7 .gallery-item { max-width: 14.28%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11%; }

.gallery-caption { display: block; }

.mobile-nav { display: none; }

/*common site style*/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

.container:after { content: ""; display: block; clear: both; }

.row { margin-left: -10px; margin-right: -10px; }
.row:after { content: ""; display: block; clear: both; }

.wrapper {
  max-width: 1525px;
  margin: 0 auto;
  background: #fff;
}

.inner .wrapper { padding-top: 0; }

.site-header {
  width: 100%;
  padding: 20px 0 0;
  z-index: 1;
}

.header-t {
  min-height: 30px;
  position: relative;
  z-index: 100;
}

.header-t:after { display: block; clear: both; content: ""; }

.header-t .social-networks {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  width: 20%;
}

.header-t .social-networks li { float: left; margin-right: 16px; }

.header-t .social-networks li a:hover {
  text-decoration: none;
  color: var(--font-color);
}

.header-t .tel-link { float: right; font-size: 24px; }

.tel-link svg {
  transform: rotate(90deg);
  width: 20px;
  height: 20px;
  margin-right: 7px;
}

.header-t .tel-link:hover {
  text-decoration: none;
  color: var(--font-color);
}

.header-b { margin: 28px 0 0; }

@media only screen and (min-width: 768px) {
  .site-branding { max-width: 50%; }
}

.site-branding {
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: -65px;
}

.site-branding .img-holder { display: block; }

.site-branding .custom-logo-link { margin-bottom: 10px; }

.site-branding .site-title,
.site-branding .custom-logo-link {
  position: relative;
  z-index: 9999;
}

.site-branding .site-title {
  font: 30px/34px var(--title-font);
  color: #66662f;
  margin: 0 0 5px;
}

.site-branding .site-title a { color: #66662f; }

.site-branding .site-title a:hover { text-decoration: none; }

.site-branding .site-description {
  font: 12px/15px Arial, Helvetica, sans-serif;
  color: #999;
  margin: 0;
}

.site { background: #fff; }

.custom-background-image,
.custom-background-color { margin: 20px; }

/*banner style*/
.banner-section { position: relative; }

.banner-section img { width: 100%; vertical-align: top; }

.banner-section:before {
  background: rgba(169,169,169,.25);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.banner-section .banner-text {
  position: absolute;
  width: 100%;
  left: 0;
  top: 19.3vw;
}

.banner-section .banner-text .text {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-size: 32px;
  line-height: 36px;
  color: #fff;
}

.banner-section .banner-text .text .title {
  font: 72px/80px var(--title-font);
  display: block;
  letter-spacing: 2px;
  margin: 0 0 26px;
}

.banner-section .banner-text .text p { margin: 0 0 39px; }

.banner-section .banner-text .text .btn-green { color: #fff; }

.btn-green {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--primary-color);
  display: inline-block;
  border-radius: 5px;
  padding: 15px 59px;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}

.btn-green:hover { text-decoration: none; background: #526800; color: #fff; }

.btn-green:focus { outline-offset: 2px; outline-color: #000; }

/*promotional block style*/
.promotional-block {
  background: var(--background-color);
  height: 279px;
  padding-top: 53px;
  margin-bottom: 174px;
}

.promotional-block .row { display: flex; flex: 1; flex-wrap: wrap; }

.promotional-block .col {
  float: left;
  width: 33.3333%;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.promotional-block .col .img-holder { position: relative; }

.promotional-block .col .img-holder a { display: block; height: 100%; }

.promotional-block .col .img-holder a:focus { outline-color: #fff; }

.promotional-block .col .img-holder img { vertical-align: top; }

.promotional-block .col .text-holder {
  background: #f6f6f6;
  padding: 23px 21px;
  position: relative;
  max-height: 140px;
  overflow: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.promotional-block .col .text-holder .title {
  font: 24px/36px var(--title-font);
  color: var(--heading-color);
  display: block;
}

.promotional-block .col .text-holder .title a { color: var(--heading-color); }

.promotional-block .col .text-holder .title a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.promotional-block .col .text-holder p { margin: 0; }

.promotional-block .col .img-holder .icon-holder {
  width: 35px;
  height: 35px;
  background: var(--background-color);
  border-radius: 50%;
  -webkit-border-radius: 100px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 35px;
  position: absolute;
  left: 19px;
  bottom: -18px;
  z-index: 1;
}

/*welcome-note style*/
.welcome-note { padding: 50px 0 112px; }

.welcome-note .title {
  color: var(--heading-color);
  font: 30px/39px var(--title-font);
  margin: 0 0 30px;
  display: block;
}

.welcome-note .col {
  float: left;
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
}

.welcome-note .col.left-col {
  font: 30px/39px var(--title-font);
  color: var(--heading-color);
  padding-right: 43px;
  margin-top: 10px;
}

.welcome-note .col.left-col a { outline-offset: 2px; }

.welcome-note p { margin: 0 0 19px; }

.welcome-note .btn-green { margin: 15px 0 0; color: #fff; }

/*services section style*/
.services { background: #f7f7f7; padding: 78px 0 59px; }

.services .header { margin: 0 0 43px; }

.services .header h2 {
  font: 30px/39px var(--title-font);
  color: var(--heading-color);
  margin: 0;
}

.services .col {
  float: left;
  width: 33.3333%;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 0 49px;
}

.services .col .img-holder {
  display: block;
  height: 100%;
  margin: 0 0 24px;
}

.services .col .img-holder img { vertical-align: top; }

.services .col .img-holder:focus { outline-offset: 2px; }

.services .col h3 {
  font: 20px/24px var(--title-font);
  margin: 0;
  color: var(--primary-font);
  padding: 0 0 0 3px;
}

.services .col h3 a { color: var(--primary-font); }

.services .col h3 a:hover { text-decoration: none; color: var(--primary-color); }

/*testimonial section style*/
.testimonial { padding: 87px 0 122px; }

.testimonial h2 {
  font: 30px/39px var(--title-font);
  color: var(--heading-color);
  margin: 0;
}

.testimonial .header { margin: 0 0 45px; }

.testimonial #slider .holder { overflow: hidden; }

.testimonial #slider .holder .img-holder {
  float: left;
  width: 33.3333%;
  padding-left: 10px;
  padding-right: 10px;
}

.testimonial #slider .holder .text-holder {
  float: left;
  width: 66.6667%;
  padding-left: 30px;
  padding-right: 10px;
}

.testimonial #slider .holder .text-holder .holder {
  max-height: 220px;
  overflow: auto;
}

.testimonial #slider .holder .text-holder .name {
  font: 24px/33px var(--title-font);
  color: var(--primary-font);
  display: block;
  margin: 0 0 13px;
}

.flexslider ul { margin: 0; padding: 0; list-style: none; }

.testimonial #slider .slick-slider .slick-arrow {
  position: absolute;
  left: 40.5%;
  top: 50.5%;
  border: none;
  box-shadow: none;
  text-indent: 50px;
  overflow: hidden;
  outline: none;
}

.testimonial #slider .slick-slider .slick-prev {
  background: url(../images/arrows.png) no-repeat;
  width: 50px;
  height: 50px;
  left: calc(40.5% - 60px);
  z-index: 99;
}

.testimonial #slider .slick-slider .slick-next {
  background: url(../images/arrows.png) no-repeat -60px 0;
  width: 50px;
  height: 50px;
}

.testimonial #slider .slick-slider .slick-prev:focus,
.testimonial #slider .slick-slider .slick-next:focus {
  outline: thin dotted #000;
  outline-offset: 2px;
}

.testimonial #slider .slick-slider .slick-arrow.slick-disabled {
  opacity: 1 !important;
  z-index: 0;
  cursor: pointer;
}

.testimonial #carousel {
  width: 760px;
  float: right;
  position: relative;
  margin: -159px 0 0;
  z-index: 2;
}

#carousel .nav-thumb .slick-slide { margin-right: 40px; line-height: 0; }

#carousel .nav-thumb li { position: relative; }

#carousel .nav-thumb li:before {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,.6);
  content: "";
}

#carousel .nav-thumb .slick-current li:before { background: none; content: ""; }

/*social-block style*/
.social-block {
  background: var(--background-color);
  padding: 30px 0;
  color: #fff;
  font: 30px/39px var(--title-font);
  text-align: center;
}

.social-block .social-networks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}

.social-block .social-networks li { display: inline-block; margin: 0 10px; }

.social-block .social-networks li a {
  color: #fff;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}

.social-block .social-networks li a:hover {
  color: #3f3c41;
  text-decoration: none;
}

/*inner page style*/
.inner .site-header { position: fixed; }

.breadcrumbs { background: var(--background-color); }

#crumbs {
  padding: 25px 0;
  color: #fff;
  font-size: 16px;
}

#crumbs a { color: #fff; }

#crumbs span,
#crumbs a { margin-right: 3px; }

#crumbs span:last-of-type .separator { display: none; }

.site-content { padding: 40px 0 80px; }

.page-header .page-title {
  font: 48px/52px var(--title-font);
  color: var(--heading-color);
  margin: 0 0 27px;
}

#primary {
  float: left;
  width: 66.6667%;
  padding-left: 10px;
  padding-right: 10px;
}

.post {
  padding: 0 0 40px;
  margin: 0 0 40px;
  border-bottom: 1px solid #e8e8e8;
}

.post .entry-header { margin: 0 0 20px; }

.post .entry-header .entry-title {
  font: 30px/36px var(--title-font);
  color: var(--font-color-dark);
  margin: 0 0 10px;
}

.post .entry-header .entry-title a { color: var(--font-color-dark); }

.post .entry-header .entry-title a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.post .entry-meta { font-size: 16px; line-height: 20px; }

.post .entry-meta .byline { display: inline-block; }

.post .entry-meta span { margin-right: 23px; }

.post .entry-meta span a { position: relative; padding-left: 20px; }

.post .entry-meta span a:before {
  background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath fill="%237fa200" d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z"/%3E%3C/svg%3E') center center no-repeat;
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 0px;
  display: block;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: ease .2s;
  -moz-transition: ease .2s;
  transition: ease .2s;
}

.post .entry-meta .posted-on a:before {
  background: var(--primary-color);
  height: 14px;
  width: 14px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath fill="%237fa200" d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z"/%3E%3C/svg%3E');
  mask-repeat: no-repeat;
  mask-image: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath fill="%237fa200" d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z"/%3E%3C/svg%3E');
}

/* --------------------------------------------------------------------------
   YOUR FILE 6 CONTINUES HERE:
   Paste the remaining CSS from the original theme stylesheet below this line.
   DO NOT change selectors while you still depend on WP markup.
   -------------------------------------------------------------------------- */



/* ==========================================================================
   5) WP BLOCK CORE STYLES (file 7)
   NOTE: This is massive and mostly only needed if your HTML still contains
   wp-block-* classes (Gutenberg markup). Kept as-is.
   ========================================================================== */
@charset "UTF-8";.wp-block-archives-dropdown label{display:block}.wp-block-avatar{box-sizing:border-box}.wp-block-avatar.aligncenter{text-align:center}.wp-block-audio{box-sizing:border-box}.wp-block-audio figcaption{margin-top:.5em;margin-bottom:1em}.wp-block-audio audio{width:100%;min-width:300px}.wp-block-button__link{cursor:pointer;display:inline-block;text-align:center;word-break:break-word;box-sizing:border-box}.wp-block-button__link.aligncenter{text-align:center}.wp-block-button__link.alignright{text-align:right}:where(.wp-block-button__link){box-shadow:none;text-decoration:none;border-radius:9999px;padding:calc(.667em + 2px) calc(1.333em + 2px)}.wp-block-button[style*=text-decoration] .wp-block-button__link{text-decoration:inherit}.wp-block-buttons>.wp-block-button.has-custom-width{max-width:none}.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link{width:100%}.wp-block-buttons>.wp-block-button.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-buttons>.wp-block-button.wp-block-button__width-25{width:calc(25% - var(--wp--style--block-gap, .5em)*0.75)}.wp-block-buttons>.wp-block-button.wp-block-button__width-50{width:calc(50% - var(--wp--style--block-gap, .5em)*0.5)}.wp-block-buttons>.wp-block-button.wp-block-button__width-75{width:calc(75% - var(--wp--style--block-gap, .5em)*0.25)}.wp-block-buttons>.wp-block-button.wp-block-button__width-100{width:100%;flex-basis:100%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-25{width:25%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-50{width:50%}.wp-block-buttons.is-vertical>.wp-block-button.wp-block-button__width-75{width:75%}.wp-block-button.is-style-squared,.wp-block-button__link.wp-block-button.is-style-squared{border-radius:0}.wp-block-button.no-border-radius,.wp-block-button__link.no-border-radius{border-radius:0!important}.wp-block-button.is-style-outline>.wp-block-button__link,.wp-block-button .wp-block-button__link.is-style-outline{border:2px solid;padding:.667em 1.333em}.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color),.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color){color:currentColor}.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background),.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background){background-color:transparent;background-image:none}.wp-block-buttons.is-vertical{flex-direction:column}.wp-block-buttons.is-vertical>.wp-block-button:last-child{margin-bottom:0}.wp-block-buttons>.wp-block-button{display:inline-block;margin:0}.wp-block-buttons.is-content-justification-left{justify-content:flex-start}.wp-block-buttons.is-content-justification-left.is-vertical{align-items:flex-start}.wp-block-buttons.is-content-justification-center{justify-content:center}.wp-block-buttons.is-content-justification-center.is-vertical{align-items:center}.wp-block-buttons.is-content-justification-right{justify-content:flex-end}.wp-block-buttons.is-content-justification-right.is-vertical{align-items:flex-end}.wp-block-buttons.is-content-justification-space-between{justify-content:space-between}.wp-block-buttons.aligncenter{text-align:center}.wp-block-buttons:not(.is-content-justification-space-between,.is-content-justification-right,.is-content-justification-left,.is-content-justification-center) .wp-block-button.aligncenter{margin-left:auto;margin-right:auto;width:100%}.wp-block-buttons[style*=text-decoration] .wp-block-button,.wp-block-buttons[style*=text-decoration] .wp-block-button__link{text-decoration:inherit}.wp-block-buttons.has-custom-font-size .wp-block-button__link{font-size:inherit}.wp-block-button.aligncenter,.wp-block-calendar{text-align:center}.wp-block-calendar tbody td,.wp-block-calendar th{padding:.25em;border:1px solid #ddd}.wp-block-calendar tfoot td{border:none}.wp-block-calendar table{width:100%;border-collapse:collapse}.wp-block-calendar table th{font-weight:400;background:#ddd}.wp-block-calendar a{text-decoration:underline}.wp-block-calendar table caption,.wp-block-calendar table tbody{color:#40464d}.wp-block-categories{box-sizing:border-box}.wp-block-categories.alignleft{margin-right:2em}.wp-block-categories.alignright{margin-left:2em}.wp-block-code{box-sizing:border-box}.wp-block-code code{display:block;font-family:inherit;overflow-wrap:break-word;white-space:pre-wrap}.wp-block-columns{display:flex;margin-bottom:1.75em;box-sizing:border-box;flex-wrap:wrap!important;align-items:normal!important}@media (min-width:782px){.wp-block-columns{flex-wrap:nowrap!important}}.wp-block-columns.are-vertically-aligned-top{align-items:flex-start}.wp-block-columns.are-vertically-aligned-center{align-items:center}.wp-block-columns.are-vertically-aligned-bottom{align-items:flex-end}@media (max-width:781px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:100%!important}}@media (min-width:782px){.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis]{flex-grow:0}}.wp-block-columns.is-not-stacked-on-mobile{flex-wrap:nowrap!important}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column{flex-basis:0;flex-grow:1}.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column[style*=flex-basis]{flex-grow:0}:where(.wp-block-columns.has-background){padding:1.25em 2.375em}.wp-block-column{flex-grow:1;min-width:0;word-break:break-word;overflow-wrap:break-word}.wp-block-column.is-vertically-aligned-top{align-self:flex-start}.wp-block-column.is-vertically-aligned-center{align-self:center}.wp-block-column.is-vertically-aligned-bottom{align-self:flex-end}.wp-block-column.is-vertically-aligned-bottom,.wp-block-column.is-vertically-aligned-center,.wp-block-column.is-vertically-aligned-top{width:100%}.wp-block-post-comments .alignleft{float:left}.wp-block-post-comments .alignright{float:right}.wp-block-post-comments .navigation:after{content:"";display:table;clear:both}.wp-block-post-comments .commentlist{clear:both;list-style:none;margin:0;padding:0}.wp-block-post-comments .commentlist .comment{min-height:2.25em;padding-left:3.25em}.wp-block-post-comments .commentlist .comment p{font-size:1em;line-height:1.8;margin:1em 0}.wp-block-post-comments .commentlist .children{list-style:none;margin:0;padding:0}.wp-block-post-comments .comment-author{line-height:1.5}.wp-block-post-comments .comment-author .avatar{border-radius:1.5em;display:block;float:left;height:2.5em;margin-top:.5em;margin-right:.75em;width:2.5em}.wp-block-post-comments .comment-author cite{font-style:normal}.wp-block-post-comments .comment-meta{font-size:.875em;line-height:1.5}.wp-block-post-comments .comment-meta b{font-weight:400}.wp-block-post-comments .comment-meta .comment-awaiting-moderation{margin-top:1em;margin-bottom:1em;display:block}.wp-block-post-comments .comment-body .commentmetadata{font-size:.875em}.wp-block-post-comments .comment-form-author label,.wp-block-post-comments .comment-form-comment label,.wp-block-post-comments .comment-form-email label,.wp-block-post-comments .comment-form-url label{display:block;margin-bottom:.25em}.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),.wp-block-post-comments .comment-form textarea{display:block;box-sizing:border-box;width:100%}.wp-block-post-comments .comment-form-cookies-consent{display:flex;gap:.25em}.wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent{margin-top:.35em}.wp-block-post-comments .comment-reply-title{margin-bottom:0}.wp-block-post-comments .comment-reply-title :where(small){font-size:var(--wp--preset--font-size--medium,smaller);margin-left:.5em}.wp-block-post-comments .reply{font-size:.875em;margin-bottom:1.4em}.wp-block-post-comments input:not([type=submit]),.wp-block-post-comments textarea{border:1px solid #949494;font-size:1em;font-family:inherit}.wp-block-post-comments input:not([type=submit]):not([type=checkbox]),.wp-block-post-comments textarea{padding:calc(.667em + 2px)}:where(.wp-block-post-comments input[type=submit]){border:none}.wp-block-comments-pagination>.wp-block-comments-pagination-next,.wp-block-comments-pagination>.wp-block-comments-pagination-numbers,.wp-block-comments-pagination>.wp-block-comments-pagination-previous{margin-right:.5em;margin-bottom:.5em}.wp-block-comments-pagination>.wp-block-comments-pagination-next:last-child,.wp-block-comments-pagination>.wp-block-comments-pagination-numbers:last-child,.wp-block-comments-pagination>.wp-block-comments-pagination-previous:last-child{margin-right:0}.wp-block-comments-pagination .wp-block-comments-pagination-previous-arrow{margin-right:1ch;display:inline-block}.wp-block-comments-pagination .wp-block-comments-pagination-previous-arrow:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-comments-pagination .wp-block-comments-pagination-next-arrow{margin-left:1ch;display:inline-block}.wp-block-comments-pagination .wp-block-comments-pagination-next-arrow:not(.is-arrow-chevron){transform:scaleX(1)}.wp-block-comments-pagination.aligncenter{justify-content:center}.wp-block-comment-template{margin-bottom:0;max-width:100%;list-style:none;padding:0}.wp-block-comment-template li{clear:both}.wp-block-comment-template ol{margin-bottom:0;max-width:100%;list-style:none;padding-left:2rem}.wp-block-comment-template.alignleft{float:left}.wp-block-comment-template.aligncenter{margin-left:auto;margin-right:auto;width:-moz-fit-content;width:fit-content}.wp-block-comment-template.alignright{float:right}.wp-block-cover,.wp-block-cover-image{position:relative;background-position:50%;min-height:430px;display:flex;justify-content:center;align-items:center;padding:1em;box-sizing:border-box}/* ... continues in your original file 7 */

/* ==========================================================================
   6) CONTACT FORM 7 (file 8)
   ========================================================================== */
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 textarea{width:100%;padding:10px;border:1px solid #ddd}
.wpcf7-submit{background:#7fa200;color:#fff;border:none;padding:10px 18px;border-radius:3px}