/* ==========================================================================
   SUNSHINE MAKEUP STUDIO - SERVICES DESIGN SYSTEM
   Cleanly scoped styles for Homepage & Services Subpage
   ========================================================================== */

:root {
  --srv-burgundy: #8B1D38;
  --srv-burgundy-dark: #580E1D;
  --srv-burgundy-hover: #A32444;
  --srv-gold-accent: #C89D66;
  --srv-blush-bg: #FAF3EF;
  --srv-blush-card: #FFFFFF;
  --srv-blush-badge: #FCEEEA;
  --srv-border-card: #EAE0D8;
  --srv-text-title: #1A1110;
  --srv-text-body: #5C5250;
  --srv-font-serif: 'Playfair Display', Georgia, serif;
  --srv-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --srv-font-script: 'Alex Brush', cursive, 'Playfair Display', serif;
  --srv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. SERVICES HERO HEADER (services.php Header Section)
   ========================================================================== */
.sunshine-services-hero-section {
  position: relative !important;
  background: linear-gradient(135deg, #FFF9F6 0%, #FDF1EA 45%, #FCEAE1 100%) !important;
  padding: 55px 0 65px 0 !important;
  overflow: hidden !important;
  font-family: var(--srv-font-sans) !important;
  color: var(--srv-text-body) !important;
  border-bottom: 1px solid #F3E0D6 !important;
}

/* Background Watermarks & Decor */
.services-hero-decor {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.services-hero-decor.floral-left {
  top: -20px !important;
  left: -20px !important;
  width: 280px !important;
  height: 280px !important;
  opacity: 0.22 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='320' height='320' viewBox='0 0 320 320' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10 10C35 40 75 90 90 145C100 185 85 220 50 250C30 270 5 285 -20 290' stroke='%23BA1B4D' stroke-width='1.4' stroke-opacity='0.45'/%3E%3Cpath d='M90 145C130 110 180 85 235 80C265 75 295 85 315 105' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.35'/%3E%3Cpath d='M45 65C70 45 105 50 125 75C140 95 135 125 115 140' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.3' stroke-dasharray='3 3'/%3E%3Cpath d='M80 180C110 160 145 170 165 200C180 225 170 255 145 270' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.3' stroke-dasharray='3 3'/%3E%3Ccircle cx='90' cy='145' r='3' fill='%23BA1B4D' fill-opacity='0.4'/%3E%3Ccircle cx='125' cy='75' r='2.5' fill='%23BA1B4D' fill-opacity='0.4'/%3E%3C/svg%3E") !important;
}

.services-hero-decor.floral-bottom-left {
  bottom: -30px !important;
  left: 10px !important;
  width: 200px !important;
  height: 200px !important;
  opacity: 0.18 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 230C30 180 70 140 120 120C160 105 200 110 230 135' stroke='%23BA1B4D' stroke-width='1.3' stroke-opacity='0.4'/%3E%3Cpath d='M120 120C110 70 85 30 40 10' stroke='%23BA1B4D' stroke-width='1.1' stroke-opacity='0.35'/%3E%3C/svg%3E") !important;
}

.services-hero-decor.floral-right-arch {
  top: 10px !important;
  right: 180px !important;
  width: 260px !important;
  height: 260px !important;
  opacity: 0.20 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='280' height='280' viewBox='0 0 280 280' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M270 20C220 50 180 100 160 160C145 210 160 250 190 270' stroke='%23BA1B4D' stroke-width='1.3' stroke-opacity='0.4'/%3E%3Cpath d='M160 160C110 140 70 100 50 50' stroke='%23BA1B4D' stroke-width='1.1' stroke-opacity='0.3' stroke-dasharray='4 3'/%3E%3C/svg%3E") !important;
}

/* Floating Sparkles */
.services-hero-sparkle {
  position: absolute !important;
  pointer-events: none !important;
  color: #D4904C !important;
  text-shadow: 0 0 8px rgba(212, 144, 76, 0.5) !important;
  z-index: 1 !important;
  user-select: none !important;
}

.services-hero-sparkle.sp-1 {
  top: 45px !important;
  left: 28px !important;
  font-size: 17px !important;
  opacity: 0.8 !important;
}

.services-hero-sparkle.sp-2 {
  top: 50% !important;
  left: 48% !important;
  font-size: 15px !important;
  opacity: 0.75 !important;
}

.services-hero-sparkle.sp-3 {
  top: 150px !important;
  left: 65px !important;
  font-size: 13px !important;
  opacity: 0.65 !important;
}

/* 1. Breadcrumbs & Tag Badge */
.services-hero-breadcrumb-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.services-hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #FFF4EE !important;
  border: 1.2px solid #EAC8B9 !important;
  padding: 5px 16px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #741D2D !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(116, 29, 45, 0.05) !important;
}

.services-hero-tag .tag-icon {
  font-size: 12px !important;
  color: #BA1B4D !important;
}

.breadcrumb-dash {
  color: #C8AEA3 !important;
  font-weight: 300 !important;
  font-size: 14px !important;
}

.services-breadcrumbs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  color: #6C5559 !important;
}

.services-breadcrumbs .crumb-link {
  color: #6C5559 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.services-breadcrumbs .crumb-link:hover {
  color: #741D2D !important;
}

.services-breadcrumbs .crumb-sep {
  font-size: 11px !important;
  color: #B59B90 !important;
}

.services-breadcrumbs .crumb-current {
  color: #2D0B14 !important;
  font-weight: 600 !important;
}

/* 2. Main Title (H1) */
.services-hero-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  color: #280B12 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
}

.services-hero-title .script-mathura {
  font-family: 'Alex Brush', cursive, var(--srv-font-serif) !important;
  font-size: 64px !important;
  color: #9A243F !important;
  font-weight: 400 !important;
  display: inline-block !important;
  margin-left: 6px !important;
  line-height: 0.85 !important;
  position: relative !important;
}

.services-hero-title .mathura-heart-swash {
  font-size: 24px !important;
  color: #9A243F !important;
  display: inline-block !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  transform: translateY(-4px) rotate(10deg) !important;
}

/* 3. Subtitle / Description */
.services-hero-desc {
  font-family: var(--srv-font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #5C4A4E !important;
  margin-bottom: 24px !important;
  max-width: 520px !important;
}

.services-hero-desc b,
.services-hero-desc strong {
  color: #280B12 !important;
  font-weight: 600 !important;
}

/* 4. 4 Micro Feature Pillars Bar */
.services-pillars-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 26px !important;
  padding: 16px 14px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.2px solid rgba(234, 208, 195, 0.7) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 18px rgba(116, 29, 45, 0.04) !important;
  max-width: 520px !important;
}

.services-pillar-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  padding: 0 4px !important;
}

.services-pillar-col:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: -6px !important;
  top: 12% !important;
  height: 76% !important;
  width: 1px !important;
  background-color: #EBD3C7 !important;
}

.services-pillar-col .pillar-icon-badge {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background-color: #FDF1EA !important;
  border: 1.5px solid #F3D3C4 !important;
  color: #8B1D38 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  box-shadow: 0 4px 12px rgba(139, 29, 56, 0.08) !important;
  transition: all 0.3s ease !important;
}

.services-pillar-col .pillar-icon-badge svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #8B1D38 !important;
  transition: stroke 0.3s ease !important;
}

.services-pillar-col:hover .pillar-icon-badge {
  transform: translateY(-3px) scale(1.06) !important;
  background-color: #8B1D38 !important;
  border-color: #8B1D38 !important;
}

.services-pillar-col:hover .pillar-icon-badge svg {
  stroke: #FFFFFF !important;
}

.services-pillar-col .pillar-title {
  font-family: var(--srv-font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #280B12 !important;
  line-height: 1.35 !important;
}

/* 5. Social Proof (Avatar Stack + Text) - "View All Services" button removed */
.services-hero-social-proof {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 10px !important;
}

.client-avatar-stack {
  display: flex !important;
  align-items: center !important;
}

.client-avatar-stack .avatar-img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2.5px solid #FFFFFF !important;
  margin-left: -11px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.25s ease !important;
}

.client-avatar-stack .avatar-img:first-child {
  margin-left: 0 !important;
}

.client-avatar-stack .avatar-img:hover {
  transform: scale(1.15) translateY(-2px) !important;
  z-index: 5 !important;
}

.client-avatar-stack .avatar-plus-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #FCE8E0 !important;
  color: #BA1B4D !important;
  border: 2.5px solid #FFFFFF !important;
  margin-left: -11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

.social-proof-text {
  font-family: var(--srv-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #5C4A4E !important;
  line-height: 1.35 !important;
}

/* Right Visual Composition */
.services-hero-visual-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 530px !important;
  height: 490px !important;
  margin: 0 auto !important;
  z-index: 2 !important;
}

/* Decorative Golden Arc Contour */
.services-hero-arch-contour {
  position: absolute !important;
  top: -14px !important;
  right: 10px !important;
  width: 370px !important;
  height: 460px !important;
  border: 1.5px solid rgba(212, 144, 76, 0.45) !important;
  border-radius: 195px 195px 30px 30px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Main Architectural Bridal Arch Frame */
.services-hero-main-arch {
  position: absolute !important;
  top: 6px !important;
  right: 24px !important;
  width: 345px !important;
  height: 435px !important;
  border-radius: 180px 180px 24px 24px !important;
  overflow: hidden !important;
  border: 4.5px solid #FFFFFF !important;
  box-shadow: 0 22px 55px rgba(116, 29, 45, 0.18), 0 4px 18px rgba(0, 0, 0, 0.06) !important;
  z-index: 2 !important;
  background: #260A13 !important;
}

.services-hero-main-arch .main-arch-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 10% !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.services-hero-main-arch:hover .main-arch-img {
  transform: scale(1.03) !important;
}

/* Two Overlapping Left Thumbnails */
.services-hero-thumbs-col {
  position: absolute !important;
  top: 65px !important;
  left: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 4 !important;
}

.services-hero-thumb-card {
  width: 140px !important;
  height: 112px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 3.5px solid #FFFFFF !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(116, 29, 45, 0.12) !important;
  transition: all 0.35s ease !important;
  background: #FFFFFF !important;
}

.services-hero-thumb-card:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2) !important;
}

.services-hero-thumb-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Floating Circular Badge on Right */
.services-hero-story-badge {
  position: absolute !important;
  top: 135px !important;
  right: -12px !important;
  z-index: 5 !important;
}

.services-badge-circle {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F3D2C4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: 0 10px 26px rgba(116, 29, 45, 0.15) !important;
  padding: 6px !important;
  transition: transform 0.3s ease !important;
}

.services-badge-circle:hover {
  transform: scale(1.08) rotate(3deg) !important;
}

.services-badge-circle .badge-leaf-icon {
  font-size: 13px !important;
  color: #BA1B4D !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.services-badge-circle .badge-text {
  font-family: var(--srv-font-sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #2D0B14 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.3px !important;
}

.services-badge-circle .badge-heart-icon {
  font-size: 10px !important;
  color: #BA1B4D !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

/* 7. Floating Stat Badge (150+ Happy Clients & 5★ Rated Studio) */
.services-hero-stat-card {
  position: absolute !important;
  bottom: 8px !important;
  right: 28px !important;
  z-index: 5 !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F3DDD3 !important;
  border-radius: 50px !important;
  padding: 11px 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  box-shadow: 0 16px 38px rgba(116, 29, 45, 0.14), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.3s ease !important;
}

.services-hero-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 42px rgba(116, 29, 45, 0.18) !important;
}

.stat-block {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.stat-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

.stat-icon-wrap.crown-wrap {
  background: #FDF1E8 !important;
  color: #A42042 !important;
}

.stat-icon-wrap.diamond-wrap {
  background: #FCEAE2 !important;
  color: #A42042 !important;
}

.stat-info {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.stat-value {
  font-family: var(--srv-font-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #2D0B14 !important;
}

.stat-label {
  font-family: var(--srv-font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #7A6569 !important;
}

.stat-divider {
  width: 1px !important;
  height: 30px !important;
  background: #ECD5C9 !important;
}

/* ==========================================================================
   SERVICES HERO RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Laptops & Small Desktops (<= 1199.98px) */
@media (max-width: 1199.98px) {
  .services-hero-title {
    font-size: 38px !important;
  }
  .services-hero-title .script-mathura {
    font-size: 52px !important;
  }
  .services-hero-visual-wrap {
    max-width: 460px !important;
    height: 430px !important;
  }
  .services-hero-arch-contour {
    width: 320px !important;
    height: 400px !important;
  }
  .services-hero-main-arch {
    width: 295px !important;
    height: 380px !important;
    right: 18px !important;
  }
  .services-hero-thumb-card {
    width: 120px !important;
    height: 98px !important;
  }
  .services-hero-thumbs-col {
    left: 10px !important;
    top: 55px !important;
    gap: 12px !important;
  }
  .services-hero-stat-card {
    padding: 9px 18px !important;
    gap: 14px !important;
    right: 18px !important;
  }
}

/* Tablets (<= 991.98px) */
@media (max-width: 991.98px) {
  .sunshine-services-hero-section {
    padding: 45px 0 55px 0 !important;
  }
  .services-hero-title {
    font-size: 34px !important;
  }
  .services-hero-title .script-mathura {
    font-size: 46px !important;
  }
  .services-hero-visual-wrap {
    margin-top: 45px !important;
    max-width: 440px !important;
    height: 420px !important;
  }
  .services-pillars-bar {
    max-width: 100% !important;
  }
  .services-hero-desc {
    max-width: 100% !important;
  }
}

/* Landscape / Portrait Mobile (<= 767.98px) */
@media (max-width: 767.98px) {
  .services-pillars-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 18px 14px !important;
  }
  .services-pillar-col:nth-child(2)::after {
    display: none !important;
  }
  .services-pillar-col:nth-child(1)::after {
    right: -8px !important;
  }
  .services-pillar-col:nth-child(3)::after {
    right: -8px !important;
  }
}

/* Small Mobile Screens (<= 575.98px) */
@media (max-width: 575.98px) {
  .sunshine-services-hero-section {
    padding: 35px 0 45px 0 !important;
  }
  .services-hero-title {
    font-size: 28px !important;
  }
  .services-hero-title .script-mathura {
    font-size: 38px !important;
  }
  .services-hero-title .mathura-heart-swash {
    font-size: 18px !important;
  }
  .services-hero-desc {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  .services-hero-visual-wrap {
    max-width: 330px !important;
    height: 360px !important;
    margin-top: 35px !important;
  }
  .services-hero-arch-contour {
    width: 240px !important;
    height: 330px !important;
    right: 8px !important;
  }
  .services-hero-main-arch {
    width: 225px !important;
    height: 315px !important;
    right: 12px !important;
    border-radius: 120px 120px 20px 20px !important;
  }
  .services-hero-thumbs-col {
    left: 0 !important;
    top: 40px !important;
    gap: 10px !important;
  }
  .services-hero-thumb-card {
    width: 95px !important;
    height: 78px !important;
    border-radius: 14px !important;
  }
  .services-hero-story-badge {
    top: 95px !important;
    right: -8px !important;
  }
  .services-badge-circle {
    width: 72px !important;
    height: 72px !important;
    padding: 4px !important;
  }
  .services-badge-circle .badge-text {
    font-size: 7.5px !important;
  }
  .services-hero-stat-card {
    right: 50% !important;
    transform: translateX(50%) !important;
    bottom: -5px !important;
    padding: 8px 16px !important;
    gap: 12px !important;
    width: max-content !important;
    max-width: 94% !important;
  }
  .stat-icon-wrap {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
  .stat-value {
    font-size: 15px !important;
  }
  .stat-label {
    font-size: 10px !important;
  }
  .services-pillars-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .services-pillar-col::after {
    display: none !important;
  }
}


/* ==========================================================================
   2. OUR SERVICES GRID (services.php - .services_2 & .single_service_2)
   ========================================================================== */
.services_2 {
  position: relative !important;
  background-color: #FFFBF9 !important;
  padding-top: 75px !important;
  padding-bottom: 85px !important;
}

.services_2 .section_heading_2 h5 {
  font-family: var(--srv-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--srv-burgundy) !important;
  text-transform: uppercase !important;
  letter-spacing: 2.5px !important;
  margin-bottom: 10px !important;
}

.services_2 .section_heading_2 h3 {
  font-family: var(--srv-font-serif) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 12px !important;
}

.services_2 .section_heading_2 p {
  font-family: var(--srv-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--srv-text-body) !important;
  margin: 0 auto !important;
}

/* Single Service Card Container (services.php) */
.single_service_2 {
  position: relative !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(88, 11, 27, 0.06) !important;
  border: 1px solid var(--srv-border-card) !important;
  transition: all 0.35s var(--srv-ease) !important;
  margin-top: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100% !important;
}

.single_service_2:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 45px rgba(88, 11, 27, 0.14) !important;
  border-color: rgba(139, 29, 56, 0.35) !important;
}

/* Image Wrapper */
.single_service_2_img {
  height: 250px !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background-color: #F8EFEA !important;
}

.single_service_2_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s var(--srv-ease) !important;
}

.single_service_2:hover .single_service_2_img img {
  transform: scale(1.06) !important;
}

.single_service_2_img::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(88, 11, 27, 0.4) 0%, transparent 60%) !important;
  opacity: 0.6 !important;
  transition: opacity 0.3s ease !important;
}

/* Heart Icon / Favorite Button on Card Image */
.single_service_2_img a {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  z-index: 3 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.single_service_2_img a:hover {
  background: var(--srv-burgundy) !important;
  color: #FFFFFF !important;
  transform: scale(1.12) !important;
}

/* Card Body Text Container */
.single_service_2_text {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: #FFFFFF !important;
  padding: 24px 22px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
  transition: background 0.35s ease !important;
}

.single_service_2_text .title {
  font-family: var(--srv-font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
  display: block !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.single_service_2_text .title:hover {
  color: var(--srv-burgundy) !important;
}

.single_service_2_text .description {
  font-family: var(--srv-font-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: var(--srv-text-body) !important;
  margin-bottom: 18px !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
}

/* Bottom Action Area */
.single_service_2_text .btn_area {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(234, 224, 216, 0.8) !important;
  padding-top: 14px !important;
  margin-top: auto !important;
}

.single_service_2_text .btn_area a {
  font-family: var(--srv-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--srv-burgundy) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.25s ease !important;
}

.single_service_2_text .btn_area a::after {
  content: '→' !important;
  display: inline-block !important;
  font-size: 14px !important;
  transition: transform 0.25s ease !important;
}

.single_service_2:hover .single_service_2_text .btn_area a::after {
  transform: translateX(4px) !important;
}

/* Card Hover State */
.single_service_2:hover .single_service_2_text {
  background: #FFFBF9 !important;
}

.single_service_2:hover .single_service_2_text .title {
  color: var(--srv-burgundy) !important;
}

.single_service_2:hover .single_service_2_text .btn_area a {
  color: var(--srv-burgundy-hover) !important;
}

/* ==========================================================================
   3. TOP CATEGORIES / EXPLORE SERVICES (services.php - .sunshine-categories-section)
   ========================================================================== */
.sunshine-categories-section {
  position: relative !important;
  background-color: #FFFBF9 !important;
  background: linear-gradient(135deg, #FFFDFB 0%, #FFF5F0 50%, #FDF0E9 100%) !important;
  padding: 75px 0 85px 0 !important;
  overflow: hidden !important;
  font-family: var(--srv-font-sans) !important;
}

.categories-header {
  text-align: center !important;
  margin-bottom: 50px !important;
}

.categories-header .cat-header-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.25 !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

.categories-header .cat-header-title .script-mathura {
  font-family: 'Alex Brush', cursive, var(--srv-font-serif) !important;
  font-size: 56px !important;
  color: var(--srv-burgundy) !important;
  font-weight: 400 !important;
  display: inline-block !important;
  margin-left: 4px !important;
  line-height: 0.9 !important;
}

.categories-header .cat-header-sub {
  font-family: var(--srv-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--srv-text-body) !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* 8 Card Grid Item on services.php */
.cat-card-item {
  position: relative !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F5 100%) !important;
  border: 1px solid #F3E4DC !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(88, 11, 27, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 14px 16px 18px !important;
  height: 220px !important;
  margin-bottom: 28px !important;
  transition: all 0.35s var(--srv-ease) !important;
  overflow: hidden !important;
}

.cat-card-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(88, 11, 27, 0.14) !important;
  border-color: rgba(139, 29, 56, 0.3) !important;
}

.cat-card-content {
  flex: 1 !important;
  padding-right: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.cat-card-num {
  font-family: var(--srv-font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--srv-burgundy) !important;
  opacity: 0.7 !important;
  margin-bottom: 8px !important;
  letter-spacing: 1px !important;
}

.cat-card-icon-badge {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: #FDECE5 !important;
  border: 1.5px solid #F5D9CD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  box-shadow: 0 4px 10px rgba(139, 29, 56, 0.08) !important;
}

.cat-card-icon-badge img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

.cat-card-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

.cat-card-desc {
  font-family: var(--srv-font-sans) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--srv-text-body) !important;
  margin-bottom: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-card-media {
  position: relative !important;
  width: 140px !important;
  height: 188px !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}

.cat-card-arch-bg {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 130px !important;
  height: 180px !important;
  background: linear-gradient(135deg, #580B1B 0%, #8B1D38 100%) !important;
  border-radius: 80px 14px 14px 80px !important;
  z-index: 1 !important;
}

.cat-card-img-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 135px !important;
  height: 184px !important;
  border-radius: 85px 14px 14px 85px !important;
  overflow: hidden !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
  z-index: 2 !important;
}

.cat-card-img-wrap .cat-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s var(--srv-ease) !important;
}

.cat-card-item:hover .cat-img {
  transform: scale(1.08) !important;
}

.cat-sparkle {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  z-index: 3 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 1399.98px) {
  .cat-card-item {
    height: 215px !important;
    padding: 14px 12px 14px 14px !important;
  }
  .cat-card-media {
    width: 125px !important;
    height: 175px !important;
  }
  .cat-card-img-wrap {
    width: 120px !important;
    height: 170px !important;
  }
  .cat-card-arch-bg {
    width: 115px !important;
    height: 165px !important;
  }
  .cat-card-title {
    font-size: 15.5px !important;
  }
}

@media (max-width: 1199.98px) {
  .cat-card-item {
    height: 210px !important;
  }
}

@media (max-width: 575.98px) {
  .cat-card-item {
    height: auto !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }
  .cat-card-content {
    padding-right: 0 !important;
    align-items: center !important;
    margin-top: 14px !important;
  }
  .cat-card-media {
    width: 160px !important;
    height: 180px !important;
  }
  .cat-card-img-wrap {
    width: 155px !important;
    height: 175px !important;
  }
  .cat-card-arch-bg {
    width: 150px !important;
    height: 170px !important;
  }
}


/* ==========================================================================
   4. OUR SERVICES 6-CARD GRID (HOMEPAGE index.php - .sunshine-services-section)
   ========================================================================== */
.sunshine-services-section {
  position: relative !important;
  background-color: var(--srv-blush-bg) !important;
  background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.98) 0%, #FAF3EF 55%, #F4ECE4 100%) !important;
  padding: 95px 0 105px 0 !important;
  overflow: hidden !important;
  font-family: var(--srv-font-sans) !important;
}

/* Botanical Decorative Vectors in Corners */
.sunshine-services-bg-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.12;
}

.sunshine-services-bg-decor.top-left {
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%238B1D38' stroke-width='1.2'%3E%3Cpath d='M10 10 C60 30 110 70 120 130 C130 190 70 190 70 190'/%3E%3Cpath d='M70 70 C100 60 130 80 120 110 C110 140 80 135 70 130'/%3E%3Cpath d='M50 40 C80 20 110 40 100 70 C110 100 140 90 150 80'/%3E%3C/svg%3E");
}

.sunshine-services-bg-decor.bottom-right {
  bottom: 0;
  right: 0;
  width: 280px;
  height: 280px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%238B1D38' stroke-width='1.2'%3E%3Cpath d='M190 190 C140 170 110 120 130 70 C150 20 190 10 190 10'/%3E%3Cpath d='M130 130 C100 140 70 120 80 90 C90 60 120 65 130 70'/%3E%3C/svg%3E");
}

/* Section Header */
.sunshine-services-header {
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto 50px auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.sunshine-services-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.sunshine-services-tag .tag-line {
  display: inline-block !important;
  width: 32px !important;
  height: 1.5px !important;
  background-color: var(--srv-burgundy) !important;
  opacity: 0.75 !important;
}

.sunshine-services-tag .tag-text {
  font-family: var(--srv-font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  color: var(--srv-burgundy) !important;
  text-transform: uppercase !important;
}

.sunshine-services-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--srv-text-title) !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
}

.sunshine-services-title .title-burgundy {
  color: var(--srv-burgundy) !important;
}

.sunshine-services-desc {
  font-family: var(--srv-font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  color: var(--srv-text-body) !important;
  margin: 0 auto !important;
  font-weight: 400 !important;
}

.sunshine-services-desc b {
  color: var(--srv-text-title) !important;
  font-weight: 600 !important;
}

/* 6-Card Luxury Services Grid (3 Columns) */
.sunshine-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Individual Service Card */
.sunshine-service-card {
  background-color: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid var(--srv-border-card) !important;
  box-shadow: 0 10px 28px rgba(116, 29, 45, 0.06) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  transition: all 0.35s var(--srv-ease) !important;
  height: 100% !important;
}

.sunshine-service-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(139, 29, 56, 0.35) !important;
  box-shadow: 0 20px 45px rgba(116, 29, 45, 0.14) !important;
}

/* Card Top Image */
.sunshine-service-media {
  position: relative !important;
  width: 100% !important;
  height: 230px !important;
  overflow: hidden !important;
  background-color: #F8EFEA !important;
}

.sunshine-service-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.6s var(--srv-ease) !important;
}

.sunshine-service-card:hover .sunshine-service-media img {
  transform: scale(1.06) !important;
}

/* Heart Favorite Icon on Image */
.sunshine-service-heart {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(4px) !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.3s ease !important;
  z-index: 3 !important;
  text-decoration: none !important;
}

.sunshine-service-heart:hover {
  background: var(--srv-burgundy) !important;
  color: #FFFFFF !important;
  transform: scale(1.12) !important;
}

/* Card Body */
.sunshine-service-body {
  padding: 24px 22px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
  background-color: #FFFFFF !important;
}

.sunshine-service-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--srv-burgundy) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 0.25s ease !important;
}

.sunshine-service-title:hover {
  color: var(--srv-burgundy-dark) !important;
}

.sunshine-service-desc {
  font-family: var(--srv-font-sans) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--srv-text-body) !important;
  margin-bottom: 20px !important;
  min-height: 60px !important;
}

/* Card Action Area */
.sunshine-service-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(234, 224, 216, 0.7) !important;
}

.sunshine-service-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--srv-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--srv-burgundy) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.sunshine-service-btn .btn-arrow {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: var(--srv-burgundy) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
}

.sunshine-service-card:hover .sunshine-service-btn .btn-arrow,
.sunshine-service-btn:hover .btn-arrow {
  transform: translateX(4px) !important;
  background-color: var(--srv-burgundy-dark) !important;
}

.sunshine-service-btn:hover {
  color: var(--srv-burgundy-dark) !important;
}

/* Homepage Services Responsive Breakpoints */
@media (max-width: 1199.98px) {
  .sunshine-services-title {
    font-size: 38px !important;
  }
  .sunshine-services-grid {
    gap: 20px !important;
  }
  .sunshine-service-media {
    height: 210px !important;
  }
  .sunshine-service-title {
    font-size: 19.5px !important;
  }
}

@media (max-width: 991.98px) {
  .sunshine-services-section {
    padding: 75px 0 85px 0 !important;
  }
  .sunshine-services-title {
    font-size: 34px !important;
  }
  .sunshine-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .sunshine-service-media {
    height: 230px !important;
  }
}

@media (max-width: 575.98px) {
  .sunshine-services-section {
    padding: 60px 0 70px 0 !important;
  }
  .sunshine-services-header {
    margin-bottom: 35px !important;
  }
  .sunshine-services-title {
    font-size: 28px !important;
  }
  .sunshine-services-desc {
    font-size: 13.5px !important;
  }
  .sunshine-services-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* ==========================================================================
   2. SUNSHINE SERVICE DETAILS DESIGN SYSTEM (Subpages & Sidebar)
   Harmonized Color Palette: Burgundy (#8B1D38), Gold (#DEBC97 / #C89D66), Blush (#FAF3EF)
   ========================================================================== */

/* Service Detail Hero Header Section */
.sunshine-srvdetail-hero-section {
  position: relative !important;
  background-color: #FFFDFB !important;
  background: linear-gradient(135deg, #FFFDFB 0%, #FFF5F0 50%, #FAF3EF 100%) !important;
  padding: 38px 0 46px 0 !important;
  overflow: hidden !important;
  font-family: var(--srv-font-sans) !important;
  color: var(--srv-text-body) !important;
  border-bottom: 1px solid var(--srv-border-card) !important;
  z-index: 1 !important;
}

/* Hero Watermarks & Sparkles */
.srvdetail-hero-decor {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.srvdetail-hero-decor.floral-left {
  top: 0 !important;
  left: -20px !important;
  width: 240px !important;
  height: 240px !important;
  opacity: 0.2 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='320' height='320' viewBox='0 0 320 320' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-20 -20C40 60 80 140 40 240C20 290 80 280 120 250' stroke='%238B1D38' stroke-width='1.5' stroke-opacity='0.6'/%3E%3Cpath d='M20 40C60 90 90 160 60 220' stroke='%23C89D66' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/svg%3E") !important;
}

.srvdetail-hero-decor.floral-right {
  bottom: -10px !important;
  right: -20px !important;
  width: 250px !important;
  height: 250px !important;
  opacity: 0.22 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='340' height='340' viewBox='0 0 340 340' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M360 360C300 280 240 200 280 100C300 50 240 60 200 90' stroke='%238B1D38' stroke-width='1.5' stroke-opacity='0.6'/%3E%3Ccircle cx='240' cy='140' r='60' stroke='%23C89D66' stroke-width='1' stroke-opacity='0.4'/%3E%3C/svg%3E") !important;
}

.srvdetail-hero-sparkle {
  position: absolute !important;
  color: var(--srv-gold-accent) !important;
  font-size: 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  animation: sparkleTwinkle 3s ease-in-out infinite alternate !important;
}

.srvdetail-hero-sparkle.sp-1 {
  top: 25px !important;
  left: 18% !important;
}

.srvdetail-hero-sparkle.sp-2 {
  bottom: 25px !important;
  right: 48% !important;
  animation-delay: 1.5s !important;
}

@keyframes sparkleTwinkle {
  0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  100% { opacity: 0.4; transform: scale(0.9) rotate(90deg); }
}

/* Breadcrumb Tag */
.srvdetail-breadcrumb-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFF5F0 !important;
  border: 1px solid #F3D5C8 !important;
  padding: 5px 16px !important;
  border-radius: 50px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--srv-burgundy) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(139, 29, 56, 0.05) !important;
}

.srvdetail-breadcrumb-wrap a {
  color: var(--srv-text-body) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.srvdetail-breadcrumb-wrap a:hover {
  color: var(--srv-burgundy) !important;
}

.srvdetail-breadcrumb-wrap .bc-sep {
  color: #C89D66 !important;
  font-size: 10px !important;
}

.srvdetail-breadcrumb-wrap .bc-current {
  color: var(--srv-burgundy) !important;
  font-weight: 700 !important;
}

/* Hero Typography */
.srvdetail-hero-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.22 !important;
  margin-top: 6px !important;
  margin-bottom: 14px !important;
}

.srvdetail-hero-title .script-highlight {
  font-family: 'Alex Brush', cursive, var(--srv-font-serif) !important;
  font-size: 46px !important;
  color: var(--srv-burgundy) !important;
  font-weight: 400 !important;
  display: inline-block !important;
  margin-left: 4px !important;
  line-height: 0.95 !important;
}

.srvdetail-hero-title .heart-glyph {
  font-size: 18px !important;
  color: var(--srv-burgundy) !important;
  margin-left: 4px !important;
}

.srvdetail-hero-desc {
  font-family: var(--srv-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--srv-text-body) !important;
  margin-bottom: 20px !important;
  max-width: 520px !important;
}

/* 4 Feature Pillars in Hero */
.srvdetail-pillars-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--srv-border-card) !important;
}

.srvdetail-pillar-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
}

.srvdetail-pillar-col:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 15% !important;
  height: 70% !important;
  width: 1px !important;
  background-color: var(--srv-border-card) !important;
}

.srvdetail-pillar-col .pillar-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: #FDECE5 !important;
  border: 1.5px solid #F5D9CD !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 4px 10px rgba(139, 29, 56, 0.08) !important;
  transition: transform 0.3s ease !important;
}

.srvdetail-pillar-col:hover .pillar-icon {
  transform: translateY(-3px) scale(1.05) !important;
  background-color: var(--srv-burgundy) !important;
  color: #FFFFFF !important;
  border-color: var(--srv-burgundy) !important;
}

.srvdetail-pillar-col .pillar-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.3 !important;
}

/* Right Visual Collage Frame */
.srvdetail-hero-visual {
  position: relative !important;
  width: 100% !important;
  max-width: 460px !important;
  height: 320px !important;
  margin: 0 auto !important;
  z-index: 2 !important;
}

.srvdetail-hero-arch-bg {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  width: 250px !important;
  height: 300px !important;
  background: linear-gradient(135deg, #580B1B 0%, #8B1D38 65%, #3F0610 100%) !important;
  border-radius: 95px 95px 35px 35px !important;
  box-shadow: 0 16px 40px rgba(88, 11, 27, 0.22) !important;
  z-index: 1 !important;
}

.srvdetail-hero-main-card {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  width: 230px !important;
  height: 285px !important;
  border-radius: 90px 90px 30px 30px !important;
  overflow: hidden !important;
  border: 3.5px solid #FFFFFF !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
}

.srvdetail-hero-main-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.srvdetail-hero-main-card:hover img {
  transform: scale(1.05) !important;
}

.srvdetail-hero-thumbs {
  position: absolute !important;
  top: 45px !important;
  left: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 3 !important;
}

.srvdetail-thumb-box {
  width: 125px !important;
  height: 105px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
  transition: transform 0.35s ease !important;
}

.srvdetail-thumb-box:hover {
  transform: scale(1.06) !important;
}

.srvdetail-thumb-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.srvdetail-float-seal {
  position: absolute !important;
  top: 80px !important;
  right: -12px !important;
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  background: #FFF5F0 !important;
  border: 2px solid #F3D5C8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: 0 10px 26px rgba(139, 29, 56, 0.2) !important;
  padding: 4px !important;
  z-index: 4 !important;
}

.srvdetail-float-seal .seal-icon {
  font-size: 13px !important;
  color: var(--srv-burgundy) !important;
  margin-bottom: 2px !important;
}

.srvdetail-float-seal .seal-text {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.srvdetail-float-seal .seal-stars {
  font-size: 8px !important;
  color: #D4AF37 !important;
  margin-top: 1px !important;
}

/* ==========================================================================
   3. SERVICE DETAILS MAIN CONTENT WRAPPER & COMPONENTS
   ========================================================================== */
.sunshine-srvdetail-main-section {
  padding: 60px 0 85px 0 !important;
  background-color: #FFFDFB !important;
  font-family: var(--srv-font-sans) !important;
}

/* Main Content Card */
.srvdetail-content-card {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  border: 1px solid var(--srv-border-card) !important;
  padding: 36px 36px 42px 36px !important;
  box-shadow: 0 15px 40px rgba(88, 11, 27, 0.05) !important;
}

/* Featured Media Showcase Box */
.srvdetail-media-showcase {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid var(--srv-border-card) !important;
}

.srvdetail-media-showcase img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.srvdetail-media-showcase:hover img {
  transform: scale(1.03) !important;
}

.srvdetail-media-badge {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  background: rgba(88, 11, 27, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  padding: 8px 18px !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(222, 188, 151, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 5 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  line-height: 1.4 !important;
}

.srvdetail-media-btn {
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  background: linear-gradient(135deg, #8B1D38 0%, #A32444 100%) !important;
  color: #FFFFFF !important;
  padding: 11px 24px !important;
  border-radius: 50px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 20px rgba(139, 29, 56, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
  z-index: 2 !important;
}

.srvdetail-media-btn:hover {
  background: linear-gradient(135deg, #580B1B 0%, #8B1D38 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(139, 29, 56, 0.5) !important;
}

/* Headings and Titles */
.srvdetail-section-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #FFF5F0 !important;
  border: 1px solid #F3D5C8 !important;
  padding: 4px 14px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--srv-burgundy) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 10px !important;
}

.srvdetail-main-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  line-height: 1.3 !important;
  margin-bottom: 18px !important;
}

.srvdetail-sub-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--srv-burgundy) !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.srvdetail-sub-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 22px !important;
  background: linear-gradient(to bottom, var(--srv-burgundy), var(--srv-gold-accent)) !important;
  border-radius: 4px !important;
}

.srvdetail-p {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--srv-text-body) !important;
  margin-bottom: 18px !important;
}

/* Lead Feature Box */
.srvdetail-lead-box {
  background: linear-gradient(135deg, #FFF8F5 0%, #FAF3EF 100%) !important;
  border: 1px solid #F2DDD3 !important;
  border-left: 4px solid var(--srv-burgundy) !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  margin: 24px 0 !important;
}

.srvdetail-lead-box p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #4A3A3D !important;
}

.srvdetail-lead-box strong {
  color: var(--srv-burgundy) !important;
}

/* Interactive Sub-Services Grid */
.srvdetail-subservices-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin: 24px 0 34px 0 !important;
}

.srvdetail-subservice-card {
  background: #FFFFFF !important;
  border: 1px solid var(--srv-border-card) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.srvdetail-subservice-card:hover {
  transform: translateY(-4px) !important;
  border-color: #DEBC97 !important;
  box-shadow: 0 10px 24px rgba(139, 29, 56, 0.08) !important;
}

.srvdetail-subservice-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  background: #FFF5F0 !important;
  border: 1px solid #F3D5C8 !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  transition: all 0.3s ease !important;
}

.srvdetail-subservice-card:hover .srvdetail-subservice-icon {
  background: var(--srv-burgundy) !important;
  color: #FFFFFF !important;
  border-color: var(--srv-burgundy) !important;
}

.srvdetail-subservice-info h4 {
  font-family: var(--srv-font-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  margin-bottom: 5px !important;
}

.srvdetail-subservice-info p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--srv-text-body) !important;
  margin: 0 !important;
}

/* Step by Step Journey Flow */
.srvdetail-journey-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin: 24px 0 34px 0 !important;
}

.srvdetail-journey-card {
  background: #FFFDFB !important;
  border: 1px solid var(--srv-border-card) !important;
  border-radius: 16px !important;
  padding: 20px 14px !important;
  text-align: center !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.srvdetail-journey-card:hover {
  transform: translateY(-4px) !important;
  background: #FFFFFF !important;
  border-color: var(--srv-gold-accent) !important;
  box-shadow: 0 10px 22px rgba(139, 29, 56, 0.08) !important;
}

.srvdetail-journey-step {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--srv-burgundy) 0%, var(--srv-gold-accent) 100%) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px auto !important;
  box-shadow: 0 4px 10px rgba(139, 29, 56, 0.25) !important;
}

.srvdetail-journey-card h5 {
  font-family: var(--srv-font-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  margin-bottom: 6px !important;
}

.srvdetail-journey-card p {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--srv-text-body) !important;
  margin: 0 !important;
}

/* Key Benefits Grid */
.srvdetail-benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 22px 0 32px 0 !important;
}

.srvdetail-benefit-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFDFB !important;
  border: 1px solid #F3E5DE !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--srv-text-title) !important;
  transition: all 0.25s ease !important;
}

.srvdetail-benefit-item:hover {
  background: #FFF5F0 !important;
  border-color: #DEBC97 !important;
}

.srvdetail-benefit-item i {
  color: var(--srv-burgundy) !important;
  font-size: 14px !important;
}

/* Gallery Showcase Duo */
.srvdetail-gallery-duo {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  margin: 30px 0 !important;
}

.srvdetail-gallery-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--srv-border-card) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important;
  height: 220px !important;
}

.srvdetail-gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.srvdetail-gallery-item:hover img {
  transform: scale(1.06) !important;
}

/* Mid-Content CTA Banner */
.srvdetail-cta-banner {
  background: linear-gradient(135deg, #580B1B 0%, #8B1D38 65%, #3F0610 100%) !important;
  border-radius: 20px !important;
  padding: 34px 30px !important;
  color: #FFFFFF !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 36px 0 !important;
  box-shadow: 0 14px 35px rgba(88, 11, 27, 0.25) !important;
  border: 1px solid rgba(222, 188, 151, 0.3) !important;
}

.srvdetail-cta-banner .cta-watermark {
  position: absolute !important;
  right: -20px !important;
  bottom: -20px !important;
  font-size: 140px !important;
  color: rgba(255, 255, 255, 0.04) !important;
  pointer-events: none !important;
}

.srvdetail-cta-banner h3 {
  font-family: var(--srv-font-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

.srvdetail-cta-banner p {
  font-size: 13.5px !important;
  color: #F8E7DF !important;
  margin-bottom: 20px !important;
  max-width: 520px !important;
}

.srvdetail-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.srvdetail-btn-gold {
  background: linear-gradient(135deg, #DEBC97 0%, #C89D66 100%) !important;
  color: #380710 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.srvdetail-btn-gold:hover {
  background: linear-gradient(135deg, #EAD4B8 0%, #DEBC97 100%) !important;
  color: #380710 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.srvdetail-btn-outline {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s ease !important;
}

.srvdetail-btn-outline:hover {
  background: #FFFFFF !important;
  color: var(--srv-burgundy) !important;
  transform: translateY(-2px) !important;
}

/* FAQ Section */
.srvdetail-faq-wrap {
  margin-top: 24px !important;
}

.srvdetail-faq-item {
  background: #FFFDFB !important;
  border: 1px solid var(--srv-border-card) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease !important;
}

.srvdetail-faq-item:hover {
  border-color: #DEBC97 !important;
}

.srvdetail-faq-header {
  padding: 16px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  background: #FFFFFF !important;
}

.srvdetail-faq-header h5 {
  font-family: var(--srv-font-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--srv-text-title) !important;
  margin: 0 !important;
}

.srvdetail-faq-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #FFF5F0 !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
}

.srvdetail-faq-body {
  padding: 0 20px 16px 20px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--srv-text-body) !important;
  background: #FFFFFF !important;
}

/* ==========================================================================
   4. REDESIGNED STICKY SIDEBAR (service-details-side.php)
   ========================================================================== */
.sunshine-srvdetail-sidebar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  z-index: 10 !important;
}

/* Base Sidebar Widget Card */
.srv-sidebar-widget {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1px solid var(--srv-border-card) !important;
  padding: 26px 24px !important;
  box-shadow: 0 10px 30px rgba(88, 11, 27, 0.05) !important;
}

.srv-sidebar-title {
  font-family: var(--srv-font-serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--srv-burgundy) !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid #F3E5DE !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.srv-sidebar-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1.5px !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--srv-burgundy) !important;
}

/* Categories List */
.srv-cat-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.srv-cat-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: #FFFDFB !important;
  border: 1px solid #F3EAE4 !important;
  color: #1E1315 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.srv-cat-item a span,
.srv-cat-item a .cat-left,
.srv-cat-item a .cat-left span {
  color: #1E1315 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: color 0.25s ease !important;
}

.srv-cat-item a .cat-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.srv-cat-item a .cat-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 8px !important;
  background: #FFF0E8 !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: all 0.25s ease !important;
}

.srv-cat-item a .cat-icon i {
  color: var(--srv-burgundy) !important;
  transition: color 0.25s ease !important;
}

.srv-cat-item a .cat-arrow {
  color: #C89D66 !important;
  font-size: 11px !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.srv-cat-item a:hover {
  background: #FFF5F0 !important;
  border-color: #DEBC97 !important;
  color: var(--srv-burgundy) !important;
  transform: translateX(4px) !important;
}

.srv-cat-item a:hover span,
.srv-cat-item a:hover .cat-left span {
  color: var(--srv-burgundy) !important;
}

.srv-cat-item a:hover .cat-icon {
  background: var(--srv-burgundy) !important;
  color: #FFFFFF !important;
}

.srv-cat-item a:hover .cat-icon i {
  color: #FFFFFF !important;
}

.srv-cat-item a:hover .cat-arrow {
  transform: translateX(3px) !important;
  color: var(--srv-burgundy) !important;
}

/* Active Category Item - High contrast crystal clear white text */
.srv-cat-item.active a {
  background: linear-gradient(135deg, #8B1D38 0%, #580B1B 100%) !important;
  color: #FFFFFF !important;
  border-color: #8B1D38 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(139, 29, 56, 0.25) !important;
}

.srv-cat-item.active a,
.srv-cat-item.active a *,
.srv-cat-item.active a span,
.srv-cat-item.active a .cat-left,
.srv-cat-item.active a .cat-left span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.srv-cat-item.active a .cat-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.srv-cat-item.active a .cat-icon i {
  color: #FFFFFF !important;
}

.srv-cat-item.active a .cat-arrow,
.srv-cat-item.active a .cat-arrow i {
  color: #F8E7D8 !important;
  transform: translateX(3px) !important;
}

/* Studio Timing Card */
.srv-timing-box {
  background: linear-gradient(135deg, #FFF8F5 0%, #FAF3EF 100%) !important;
  border: 1px solid #F3DDD2 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
}

.srv-timing-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.srv-timing-row:last-child {
  margin-bottom: 0 !important;
}

.srv-timing-row .timing-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: #FDECE5 !important;
  color: var(--srv-burgundy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

.srv-timing-row .timing-info strong {
  display: block !important;
  font-size: 13px !important;
  color: var(--srv-text-title) !important;
}

.srv-timing-row .timing-info span {
  font-size: 12px !important;
  color: var(--srv-text-body) !important;
}

.srv-timing-badge {
  display: inline-block !important;
  background: #FFF0E8 !important;
  color: var(--srv-burgundy) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  margin-top: 4px !important;
}

/* Quick Consultation Card */
.srv-consult-box {
  text-align: center !important;
}

.srv-consult-img {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  border: 3px solid var(--srv-gold-accent) !important;
  object-fit: cover !important;
  margin: 0 auto 12px auto !important;
  display: block !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.srv-consult-box h4 {
  font-family: var(--srv-font-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--srv-text-title) !important;
  margin-bottom: 6px !important;
}

.srv-consult-box p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--srv-text-body) !important;
  margin-bottom: 16px !important;
}

.srv-consult-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.srv-consult-btn-call {
  background: linear-gradient(135deg, #8B1D38 0%, #A32444 100%) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(139, 29, 56, 0.25) !important;
  transition: all 0.25s ease !important;
}

.srv-consult-btn-call:hover {
  background: linear-gradient(135deg, #580B1B 0%, #8B1D38 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

.srv-consult-btn-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
  transition: all 0.25s ease !important;
}

.srv-consult-btn-wa:hover {
  background: #1EBE5D !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

/* Ad / Booking Promo Banner (Full Image Display) */
.ads-img-service-details,
.srv-ad-banner {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(88, 11, 27, 0.12) !important;
  border: 1px solid var(--srv-border-card) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: block !important;
}

.ads-img-service-details:hover,
.srv-ad-banner:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(88, 11, 27, 0.18) !important;
}

.ads-img-service-details img,
.srv-ad-banner img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* Trust Summary Badge */
.srv-trust-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: #FFFDFB !important;
  border: 1px solid #F3EAE4 !important;
  border-radius: 14px !important;
  padding: 14px 10px !important;
  text-align: center !important;
}

.srv-trust-item strong {
  display: block !important;
  font-family: var(--srv-font-serif) !important;
  font-size: 17px !important;
  color: var(--srv-burgundy) !important;
}

.srv-trust-item span {
  font-size: 10.5px !important;
  color: var(--srv-text-body) !important;
}

.srv-trust-divider {
  width: 1px !important;
  height: 28px !important;
  background-color: #EAE0D8 !important;
}

/* ==========================================================================
   5. RESPONSIVE BREAKPOINTS FOR SERVICE DETAILS
   ========================================================================== */
@media (max-width: 991.98px) {
  .sunshine-srvdetail-hero-section {
    padding: 30px 0 35px 0 !important;
  }
  .srvdetail-hero-title {
    font-size: 28px !important;
  }
  .srvdetail-hero-title .script-highlight {
    font-size: 38px !important;
  }
  .srvdetail-hero-visual {
    margin-top: 25px !important;
  }
  .sunshine-srvdetail-sidebar {
    margin-top: 40px !important;
    position: static !important;
  }
  .srvdetail-media-showcase img {
    height: 320px !important;
  }
  .srvdetail-content-card {
    padding: 24px 20px !important;
  }
  .srvdetail-subservices-grid {
    grid-template-columns: 1fr !important;
  }
  .srvdetail-journey-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .srvdetail-hero-title {
    font-size: 24px !important;
  }
  .srvdetail-hero-title .script-highlight {
    font-size: 32px !important;
  }
  .srvdetail-pillars-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 8px !important;
  }
  .srvdetail-pillar-col:nth-child(2)::after {
    display: none !important;
  }
  .srvdetail-benefits-grid {
    grid-template-columns: 1fr !important;
  }
  .srvdetail-gallery-duo {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .srvdetail-gallery-item {
    height: 180px !important;
  }
  .srvdetail-journey-grid {
    grid-template-columns: 1fr !important;
  }
  .srvdetail-cta-banner {
    padding: 24px 18px !important;
  }
  .srvdetail-cta-banner h3 {
    font-size: 20px !important;
  }
}