.elementor-82 .elementor-element.elementor-element-1e19e80d{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
/* Paws Hub - Shared Styles & Navigation */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
 line-height: 1.6;
 color: #333;
}
.paws-hub-container {
 box-sizing: border-box;
 width: 100%;
 max-width: 100%;
 background: #FFFFFF;
}
.paws-hub-container * {
 box-sizing: border-box;
}
/* Navigation Bar */
.navbar {
 background: #FFFFFF;
 border-bottom: 1px solid #e5e5e5;
 padding: 16px 24px;
 position: sticky;
 top: 0;
 z-index: 100;
}
.navbar-container {
 max-width: 1280px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.navbar-brand {
 font-size: 1.25rem;
 font-weight: 800;
 color: #000000;
 text-decoration: none;
 display: flex;
 align-items: center;
 gap: 8px;
}
.navbar-brand span {
 color: #2C5E55;
}
.navbar-nav {
 display: none;
 list-style: none;
 gap: 32px;
}
.hero-section {
  position: relative !important;
  min-height: 500px !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)), url("/wp-content/uploads/2026/06/beauty-treament-1.jpeg") center/cover no-repeat !important;
}
.hero-container {
  grid-template-columns: 1fr !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 60px 24px !important;
}
.hero-content {
  color: white !important;
  max-width: 550px !important;
}
.hero-content h1 {
  color: white !important;
  font-size: 2.5rem !important;
}
.hero-content .hero-badge {
  color: rgba(255,255,255,0.8) !important;
}
.hero-content .hero-description {
  color: rgba(255,255,255,0.85) !important;
}
.hero-image {
  display: none !important;
}
@media (min-width: 768px) {
 .navbar-nav {
 display: flex;
 }
}
.navbar-nav a {
 text-decoration: none;
 color: #333;
 font-weight: 500;
 font-size: 0.95rem;
 transition: color 0.3s ease;
}
.navbar-nav a:hover,
.navbar-nav a.active {
 color: #2C5E55;
}
.navbar-cta {
 display: inline-block;
 padding: 8px 16px;
 background: #2C5E55;
 color: white;
 font-weight: 600;
 border-radius: 6px;
 text-decoration: none;
 font-size: 0.875rem;
 transition: background-color 0.3s ease;
}
.navbar-cta:hover {
 background: #1f4239;
}
/* Bilingual Text Pair */
.bilingual-pair {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.bilingual-pair .zh {
 font-size: inherit;
 font-weight: inherit;
 color: inherit;
 line-height: inherit;
}
.bilingual-pair .en {
 font-size: 0.85em;
 font-weight: 400;
 color: #999;
 line-height: 1.5;
 letter-spacing: 0.5px;
}
/* Section Styles */
.section {
 padding: 96px 24px;
}
@media (min-width: 768px) {
 .section {
 padding: 160px 32px;
 }
}
.section-container {
 max-width: 1280px;
 margin: 0 auto;
}
.section-white {
 background: #FFFFFF;
}
.section-beige {
 background: #F4F1EA;
}
.section-header {
 margin-bottom: 64px;
}
.section-badge {
 font-size: 0.875rem;
 font-weight: 600;
 color: #2C5E55;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 16px;
}
.section-title {
 font-size: 2.5rem;
 font-weight: 800;
 color: #000000;
 line-height: 1.2;
 margin-bottom: 32px;
}
.section-description {
 font-size: 1.125rem;
 color: #666;
 line-height: 1.6;
 max-width: 768px;
}
/* Buttons */
.btn-primary {
 display: inline-block;
 padding: 16px 32px;
 background: #2C5E55;
 color: white;
 font-weight: 600;
 border-radius: 8px;
 text-decoration: none;
 transition: background-color 0.3s ease;
 cursor: pointer;
 border: none;
 font-size: 1rem;
}
.btn-primary:hover {
 background: #1f4239;
}
.btn-secondary {
 display: inline-block;
 padding: 12px 24px;
 background: transparent;
 color: #2C5E55;
 font-weight: 600;
 border: 2px solid #2C5E55;
 border-radius: 6px;
 text-decoration: none;
 transition: all 0.3s ease;
 cursor: pointer;
 font-size: 0.95rem;
}
.btn-secondary:hover {
 background: #2C5E55;
 color: white;
}
/* Divider */
.divider {
 height: 1px;
 background: #2C5E55;
 margin: 0 auto;
 width: 80%;
}
/* Grid Layouts */
.grid-2 {
 display: grid;
 grid-template-columns: 1fr;
 gap: 64px;
}
@media (min-width: 768px) {
 .grid-2 {
 grid-template-columns: 1fr 1fr;
 }
}
.grid-3 {
 display: grid;
 grid-template-columns: 1fr;
 gap: 48px;
}
@media (min-width: 768px) {
 .grid-3 {
 grid-template-columns: 1fr 1fr 1fr;
 }
}
.grid-4 {
 display: grid;
 grid-template-columns: 1fr;
 gap: 48px;
}
@media (min-width: 768px) {
 .grid-4 {
 grid-template-columns: 1fr 1fr;
 }
}
/* Card Styles */
.card {
 padding: 32px;
 background: #FFFFFF;
 border: 1px solid #e5e5e5;
 border-radius: 8px;
 transition: all 0.3s ease;
}
.card:hover {
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 transform: translateY(-4px);
}
.card-title {
 font-size: 1.5rem;
 font-weight: 800;
 color: #000000;
 margin-bottom: 16px;
}
.card-description {
 color: #666;
 line-height: 1.6;
 font-size: 0.95rem;
}
/* Typography */
h1 {
 font-size: 3.5rem;
 font-weight: 800;
 color: #000000;
 line-height: 1.1;
 letter-spacing: -0.02em;
}
h2 {
 font-size: 2.5rem;
 font-weight: 800;
 color: #000000;
 line-height: 1.2;
}
h3 {
 font-size: 1.5rem;
 font-weight: 800;
 color: #000000;
 margin-bottom: 12px;
}
p {
 color: #666;
 line-height: 1.6;
}
/* Responsive */
@media (max-width: 640px) {
 h1 {
 font-size: 2rem;
 }
 h2 {
 font-size: 1.75rem;
 }
 .section {
 padding: 48px 16px;
 }
 .navbar-nav {
 display: none;
 }
 .bilingual-pair .en {
 font-size: 0.75em;
 }
}
 /* Hero Section */
 .hero-section {
 background: #FFFFFF;
 padding: 128px 24px 96px 24px;
 }
 @media (min-width: 768px) {
 .hero-section {
 padding: 192px 32px 160px 32px;
 }
 }
 .hero-container {
 max-width: 1280px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr;
 gap: 64px;
 align-items: center;
 }
 @media (min-width: 768px) {
 .hero-container {
 grid-template-columns: 1fr 1fr;
 }
 }
 .hero-content h1 {
 margin-bottom: 32px;
 }
 .hero-badge {
 font-size: 0.875rem;
 font-weight: 600;
 color: #2C5E55;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 16px;
 }
 .hero-description {
 font-size: 1.125rem;
 color: #666;
 line-height: 1.6;
 margin-bottom: 32px;
 max-width: 448px;
 }
 .hero-image {
 width: 100%;
 aspect-ratio: 1;
 background: #000000;
 border-radius: 2px;
 overflow: hidden;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 }
 .hero-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: grayscale(15%) contrast(1.15) brightness(0.95);
 }
 /* Service Summary Grid */
 .service-summary-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 32px;
 }
 @media (min-width: 768px) {
 .service-summary-grid {
 grid-template-columns: 1fr 1fr;
 }
 }
 .service-summary-card {
 padding: 32px;
 background: #F4F1EA;
 border-radius: 8px;
 transition: all 0.3s ease;
 display: flex;
 flex-direction: column;
 }
 .service-summary-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
 .service-summary-card h3 {
 font-size: 1.25rem;
 font-weight: 800;
 color: #000000;
 margin-bottom: 12px;
 }
 .service-summary-card p {
 color: #666;
 line-height: 1.6;
 margin-bottom: 24px;
 flex-grow: 1;
 }
 .service-summary-card ul {
 list-style: none;
 margin-bottom: 24px;
 padding: 0;
 }
 .service-summary-card li {
 padding: 8px 0;
 color: #666;
 font-size: 0.95rem;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .service-summary-card li::before {
 content: '✓';
 color: #2C5E55;
 font-weight: 800;
 font-size: 1em;
 }
 /* Brand Basics Section */
 .brand-basics-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 64px;
 }
 @media (min-width: 768px) {
 .brand-basics-grid {
 grid-template-columns: 1fr 1fr;
 align-items: center;
 }
 }
 .brand-basics-content h3 {
 font-size: 1.75rem;
 margin-bottom: 24px;
 }
 .brand-basics-content p {
 margin-bottom: 16px;
 line-height: 1.8;
 }
 .principles-list {
 list-style: none;
 margin: 32px 0;
 padding: 0;
 }
 .principles-list li {
 padding: 16px 0;
 padding-left: 40px;
 position: relative;
 color: #666;
 line-height: 1.6;
 }
 .principles-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 3px;
 height: 24px;
 background: #2C5E55;
 }
 .map-container {
 width: 100%;
 aspect-ratio: 1;
 background: #F4F1EA;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
 .map-container iframe {
 width: 100%;
 height: 100%;
 border: none;
 }
 /* Trust Stats */
 .trust-stats-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 32px;
 }
 @media (min-width: 768px) {
 .trust-stats-grid {
 grid-template-columns: 1fr 1fr 1fr;
 }
 }
 .trust-stat {
 text-align: center;
 padding: 24px;
 }
 .trust-stat-number {
 font-size: 2.5rem;
 font-weight: 800;
 color: #000000;
 margin-bottom: 8px;
 }
 .trust-stat-label {
 font-size: 0.875rem;
 font-weight: 600;
 color: #2C5E55;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 8px;
 }
 .trust-stat-desc {
 color: #666;
 font-size: 0.95rem;
 }
.navbar { background: #f8f7f4 !important; border-bottom: 1px solid #e8e5e0 !important; padding: 0 !important; }
.navbar-container { max-width: 1280px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 24px !important; height: 64px !important; }
.navbar-brand { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; }
.navbar-brand img { height: 42px !important; width: auto !important; border-radius: 4px !important; }
.navbar-brand span { font-size: 1.1rem !important; font-weight: 700 !important; color: #2C5E55 !important; }
.navbar-nav { display: flex !important; align-items: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; margin-left: auto !important; }
.navbar-nav a { text-decoration: none !important; color: #444 !important; font-weight: 500 !important; font-size: 0.9rem !important; padding: 8px 14px !important; }
.navbar-nav a:hover, .navbar-nav a.active { color: #2C5E55 !important; }
.navbar-nav li + li::before { content: "|" !important; color: #ccc !important; font-size: 0.85rem !important; }
.navbar-right { display: flex !important; align-items: center !important; gap: 12px !important; flex-shrink: 0 !important; margin-left: 16px !important; }
.navbar-cta { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #25D366 !important; color: #fff !important; font-weight: 600 !important; font-size: 0.85rem !important; padding: 8px 18px !important; border-radius: 20px !important; text-decoration: none !important; }
.navbar-cta:hover { background: #1da952 !important; }
.lang-switch { font-weight: 600 !important; color: #2C5E55 !important; font-size: 0.85rem !important; text-decoration: none !important; padding: 6px 12px !important; border: 1.5px solid #2C5E55 !important; border-radius: 16px !important; }
.lang-switch:hover { background: #2C5E55 !important; color: #fff !important; }
@media (max-width: 768px) {
.navbar-container { height: 56px !important; padding: 0 16px !important; }
.navbar-brand img { height: 34px !important; }
.navbar-nav { display: none !important; position: absolute !important; top: 56px; left: 0; right: 0; background: #f8f7f4; flex-direction: column; padding: 12px 16px; border-bottom: 1px solid #e8e5e0; z-index: 999; }
.navbar-nav.active { display: flex !important; }
.navbar-nav li + li::before { content: none !important; }
.navbar-nav a { padding: 10px 0 !important; border-bottom: 1px solid #eee; width: 100%; }
.navbar-right { gap: 8px !important; }
.navbar-cta { font-size: 0.8rem !important; padding: 6px 14px !important; }
.lang-switch { font-size: 0.75rem !important; padding: 4px 8px !important; }
.hamburger { display: flex !important; flex-direction: column; gap: 4px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { width: 22px; height: 2.5px; background: #444; border-radius: 2px; }
}
@media (min-width: 769px) { .hamburger { display: none !important; } }/* End custom CSS */