/* =================================
   RESIDENT STYLIST DESIGN SYSTEM
   ================================= */

/* CSS Variables for Color Palette */
:root {
  /* Core Brand Colors (Trust & Care) */
  --primary:#5C8986;
  --primary-light-teal: #A5DED3;
  --primary-dark-deep-teal: #004F57;
  --primary-dark: #003a42;
  --secondary-soft-sky-blue: #E3F2FD;
  --accent-aqua-mist: #C7EAE8;
  --neutral-white: #FFFFFF;
  
  /* Human Warmth Colors (Emotion & Approachability) */
  --skin-tone-light-warm-ivory: #FCE9DA;
  --skin-tone-mid-sand-beige: #E7C8B0;
  --soft-coral-accent-peach-blush: #FFD8C2;
  --calm-green-tint-mint-cream: #EAF7F2;
  
  /* Support & Neutral Colors */
  --text-primary-charcoal-gray: #2F3A3C;
  --text-secondary-cool-gray: #6B7A7E;
  --line-divider-light-gray: #E5E8E8;
  --shadow-tint-soft-slate: #D6E2E1;
   
  /* Typography */
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body{
  font-family: var(--font-family-primary) !important;
  background-color: var(--neutral-white) !important;
  color: var(--text-primary-charcoal-gray) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body p{
  font-size: 16px;
}

/* Typography System */
.h1, h1 {
  font-family: var(--font-family-primary) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.h2, h2 {
  font-family: var(--font-family-primary) !important;
  font-size: 48px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.25px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.h3, h3 {
  font-family: var(--font-family-primary) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.h4, h4 {
  font-family: var(--font-family-primary) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.1px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.h5, h5 {
  font-family: var(--font-family-primary) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.h6, h6 {
  font-family: var(--font-family-primary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.body-large {
  font-family: var(--font-family-primary) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.body-reg, body {
  font-family: var(--font-family-primary) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0px !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.body-small {
  font-family: var(--font-family-primary) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0px !important;
  color: var(--text-secondary-cool-gray) !important;
}

.button-cta {
  font-family: var(--font-family-primary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.label-meta {
  font-family: var(--font-family-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Hero Section Styles */
.hero-heading {
  line-height: 1.2 !important;
  color: var(--text-primary-charcoal-gray) !important;
}

.hero-section {
  background: linear-gradient(135deg, var(--primary-light-teal) 0%, var(--accent-aqua-mist) 100%) !important;
  padding: 80px 0 !important;
}

.hero-content {
  color: var(--text-primary-charcoal-gray) !important;
}

.hero-subtitle {
  color: var(--text-secondary-cool-gray) !important;
  font-size: 20px !important;
  margin-bottom: 2rem !important;
}

/* Button Styles */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--neutral-white) !important;
  padding: 18px 20px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.btn-primary:hover {
  background-color: #003a42 !important;
  border-color: #003a42 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 79, 87, 0.3) !important;
}

.btn-primary-dark {
  background-color: var(--primary-dark-deep-teal) !important;
  border-color: var(--primary-dark-deep-teal) !important;
  color: var(--neutral-white) !important;
  padding: 18px 20px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.btn-primary-dark:hover {
  background-color: var(--primary-light-teal) !important;
  border-color: var(--primary-light-teal) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 79, 87, 0.3) !important;
}

.btn-primary-outline {
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  padding: 18px 20px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.btn-primary-outline:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--neutral-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 79, 87, 0.3) !important;
}

.btn-primary-outline-white{
  background-color: transparent !important;
  border: 1px solid var(--neutral-white) !important;
  color: var(--neutral-white) !important;
  padding: 18px 20px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.btn-primary-outline-white:hover {
  background-color: var(--neutral-white) !important;
  border-color: var(--neutral-white) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}
  
.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  padding: 18px 20px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.btn-secondary:hover {
  background-color: var(--primary) !important;
  color: var(--neutral-white) !important;
}

.btn-soft {
  background-color: var(--soft-coral-accent-peach-blush) !important;
  border-color: var(--soft-coral-accent-peach-blush) !important;
  color: var(--text-primary-charcoal-gray) !important;
  padding: 18px 20px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

.btn-soft:hover {
  background-color: #ffcdb0 !important;
  transform: translateY(-2px) !important;
}

/* Card Styles */
.card {
  background-color: var(--neutral-white) !important;
  border: 1px solid var(--line-divider-light-gray) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(47, 58, 60, 0.1) !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(47, 58, 60, 0.15) !important;
  transform: translateY(-4px) !important;
}

.card-warm {
  background: linear-gradient(135deg, var(--skin-tone-light-warm-ivory) 0%, var(--calm-green-tint-mint-cream) 100%) !important;
}

/* Section Styles */
.section-padding {
  padding: 80px 0 !important;
}

.section-light {
  background-color: var(--secondary-soft-sky-blue) !important;
}

.section-warm {
  background: linear-gradient(135deg, var(--skin-tone-light-warm-ivory) 0%, var(--skin-tone-mid-sand-beige) 20%) !important;
}

.section-neutral {
  background-color: var(--neutral-white) !important;
}

/* Text Color Utilities */
.text-primary {
  color: var(--text-primary-charcoal-gray) !important;
}

.text-secondary {
  color: var(--text-secondary-cool-gray) !important;
}

.text-accent {
  color: var(--primary) !important;
}

.text-warm {
  color: #8B4513 !important;
}

.text-pure-white {
  color: var(--neutral-white) !important;
}

.text-main-theme {
  color: var(--primary) !important;
}

.text-primary-dark {
  color: var(--primary-dark-deep-teal) !important;
}

.text-primary-dark-deep-teal {
    color: var(--primary-dark-deep-teal) !important;
}

/* Background Color Utilities */
.bg-primary {
  background-color: var(--primary-light-teal) !important;
}

.bg-primary-dark {
  background-color: var(--primary) !important;
}

.bg-primary-dark-teal {
  background-color: var(--primary-dark-deep-teal) !important;
}

.bg-accent {
  background-color: var(--accent-aqua-mist) !important;
}

.bg-warm-light {
  background-color: var(--skin-tone-light-warm-ivory) !important;
}

.bg-warm-mid {
  background-color: var(--skin-tone-mid-sand-beige) !important;
}

.bg-soft-coral {
  background-color: var(--soft-coral-accent-peach-blush) !important;
}

.bg-mint {
  background-color: var(--calm-green-tint-mint-cream) !important;
}

/* Divider Styles */
.divider {
  height: 1px !important;
  background-color: var(--line-divider-light-gray) !important;
  margin: 2rem 0 !important;
}

.divider-warm {
  background: linear-gradient(90deg, transparent 0%, var(--skin-tone-mid-sand-beige) 50%, transparent 100%) !important;
}

/* Form Styles */
.form-control {
  border: 2px solid var(--line-divider-light-gray) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: var(--font-family-primary) !important;
  transition: all 0.3s ease !important;
}

.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 79, 87, 0.1) !important;
}

/* Navigation Styles */
.navbar {
  background-color: var(--neutral-white) !important;
  box-shadow: 0 2px 8px rgba(47, 58, 60, 0.1) !important;
}

.navbar-brand {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.nav-link {
  color: var(--text-primary-charcoal-gray) !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

.nav-link:hover {
  color: var(--primary) !important;
}

/* Footer Styles */
.footer {
  background-color: var(--text-primary-charcoal-gray) !important;
  color: var(--neutral-white) !important;
  padding: 60px 0 30px !important;
}

.footer h5 {
  color: var(--primary-light-teal) !important;
  margin-bottom: 1.5rem !important;
}

.footer a {
  color: var(--line-divider-light-gray) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.footer a:hover {
  color: var(--primary-light-teal) !important;
}

.hero-section-bg {
  position: relative;
  background: url('/landing-page-image/hero-landing-one.png') no-repeat;
  background-position: center;
  background-size: cover;
  height: 786px;
  overflow: hidden;
  z-index: 99;
}

.hero-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.hero-section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url('/landing-page-image/hero-landing-two.png') no-repeat;
  background-position: center;
  background-size: cover;
  animation: fadeSwap 6s infinite ease-in-out;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 2;
}

.contact-hero-section-bg{
  position: relative;
  background: url('/landing-page-image/contact-hero-bg.png') no-repeat;
  background-position: center;
  background-size: cover;
  height: 650px;
  overflow: hidden;
  z-index: 99;
}

.contact-hero-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.facility-hero-section-bg{
  position: relative;
  background: url('/landing-page-image/facility-hero-bg.png') no-repeat;
  background-position: center;
  background-size: cover;
  height: 602px;
  overflow: hidden;
  z-index: 99;
}

.facility-hero-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.register-hero-section-bg{
  position: relative;
  background: url('/landing-page-image/register-hero-bg.png') no-repeat;
  background-position: center;
  background-size: cover;
  height: 602px;
  overflow: hidden;
  z-index: 99;
}

.register-hero-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.about-us-info{
  width: 50vw;
}

.about-us-info-mobile-version{
  display: none;
}


.landing-sign-up-button{
  padding: 12px 18px !important;
  font-size: 14px !important;
}

/* 👇 Keyframes for smooth fade-in/fade-out swap */
@keyframes fadeSwap {
  0%, 40% {
    opacity: 0; /* show first image */
  }
  50%, 90% {
    opacity: 1; /* fade in second image */
  }
  100% {
    opacity: 0; /* back to first */
  }
}

/* Responsive Design */
@media only screen and (max-width: 1280px) {
  .footer-image {
    width: 300px !important;
  }
  
  .h1, h1 {
    font-size: 56px !important;
  }
  
  .h2, h2 {
    font-size: 42px !important;
  }

  .hero-section-bg,.hero-section-bg::after {
    background-position: right !important;
  }

  .about-us-info{
    display: none !important;
  }

  .about-us-info-mobile-version{
    display: block;
  }

}

@media only screen and (max-width: 1024px) {
  .register-hero-section-bg{
    background-position: 85% 50% !important;
  }
  .register-hero-section-bg::before {
    background: rgba(255, 255, 255, 0.42) !important;
  }
  .facility-hero-section-bg{
    background-position: right !important;
  }
  .facility-hero-section-bg::before {
    background: rgba(255, 255, 255, 0.42) !important;
  }
  .contact-hero-section-bg{
    background-position: right !important;
  }
  .contact-hero-section-bg::before {
    background: rgba(255, 255, 255, 0.42) !important;
  }
  .hero-section-bg::before {
    background: rgba(255, 255, 255, 0.42) !important;
  }
  .hero-section-bg::after {
    background:
      linear-gradient(rgba(255, 255, 255, 0.42) , rgba(255, 255, 255, 0.42) ),
      url('/landing-page-image/hero-landing-two.png');
  }

}

@media only screen and (max-width: 1180px) {
  .footer-image {
    width: 300px !important;
    right: 0px !important;
  }
}

@media (max-width: 768px) {
  .h1, h1 {
    font-size: 48px !important;
  }
  
  .h2, h2 {
    font-size: 36px !important;
  }
  
  .h3, h3 {
    font-size: 28px !important;
  }
  
  .h4, h4 {
    font-size: 24px !important;
  }
  
  .h5, h5 {
    font-size: 20px !important;
  }
  
  .section-padding {
    padding: 60px 0 !important;
  }
  
  .hero-section {
    padding: 60px 0 !important;
  }

  .hero-section-bg {
    background: url('/landing-page-image/hero-image-one.png') no-repeat;
    background-position: center !important;
  }

  .hero-section-bg::after {
    background:
      linear-gradient(rgba(255, 255, 255, 0.42) , rgba(255, 255, 255, 0.42) ),
      url('/landing-page-image/hero-image-two.png');
    background-position: center !important;
  }

  .btn-primary, .btn-primary-outline, .btn-primary-outline-white, .btn-secondary, .btn-soft {
    font-size: 16px !important;
  }
}

@media (max-width: 576px) {
  .h1, h1 {
    font-size: 36px !important;
  }
  
  .h2, h2 {
    font-size: 28px !important;
  }
  
  .section-padding {
    padding: 40px 0 !important;
  }
  
  .hero-section {
    padding: 40px 0 !important;
  }
}



@media (min-width: 1900px){
  .hero-section-bg{
    height: 950px;
  }
}

.slider-container {
  /* Hides the content that scrolls out of view */
  overflow: hidden;
  /* Define the height for the visible area */
  height: 400px; /* Adjust as needed */
  width: 100%;
}

.slider-track {
  /* Makes all slides line up horizontally */
  display: flex;
  /* Ensure the track is wide enough for all slides */
  width: max-content;
  /* This will be targeted by JavaScript for movement */
  transition: transform 0.5s ease-in-out; 
}

.slide {
  /* Set the width and margin for each visible slide */
  width: 300px; /* Adjust slide width */
  margin: 0 10px; /* Space between slides */
  flex-shrink: 0; /* Important: prevents slides from shrinking */
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

.slider-container {
  /* Existing styles... */
  position: relative;
}

.slider-container::before,
.slider-container::after {
  content: '';
  position: absolute;
  top: -60px;
  bottom: 0;
  width: 150px; /* How wide the fade effect is */
  z-index: 10; /* Ensures the fade is on top of the images */
  pointer-events: none; /* Allows clicks to pass through if needed */
}

.slider-container::before {
  left: 0;
  /* Gradient from transparent (over the visible content) to black (on the left edge) */
  background: linear-gradient(to right, #ffffff 0%, transparent 100%)
}

.slider-container::after {
  right: 0;
  /* Gradient from transparent (over the visible content) to black (on the right edge) */
  background: linear-gradient(to left, #ffffff 0%, transparent 100%)
}


.miyn-appointment-submit-details-contents h3 {
    font-size: 20px !important;
}



/* Bio Content Rich Text Styling - Global class for facility and stylist bios */
.bio-content {
    line-height: 1.6;
}

/* Headings */


/* Lists */
.bio-content ul, .bio-content ol {
  margin-left: 1.5em !important;
  margin-bottom: 1em !important;
  padding-left: 0.5em !important;
}

.bio-content ul {
  list-style-type: disc !important;
}

.bio-content ol {
  list-style-type: decimal !important;
}

.bio-content li {
  margin-bottom: 0.25em !important;
  line-height: 1.5 !important;
}

/* Text formatting */
.bio-content strong {
  font-weight: bold !important;
}

.bio-content em {
  font-style: italic !important;
}

.bio-content u {
  text-decoration: underline !important;
}

/* Horizontal rules */
.bio-content hr {
  border: none !important;
  border-top: 2px solid #e5e7eb !important;
  margin: 1.5em 0 !important;
  height: 0 !important;
  background: none !important;
}

/* Alignment styles */
.bio-content [style*="text-align: center"] {
  text-align: center !important;
}

.bio-content [style*="text-align: right"] {
  text-align: right !important;
}

.bio-content [style*="text-align: left"] {
  text-align: left !important;
}