a{
      color: #ffffff;
      text-decoration: none;
      transition: color 0.3s ease;
    }
/* Service Card Hover Button */
.card-hover:hover .show-more-btn {
  display: inline-block !important;
}
.show-more-btn {
  transition: opacity 0.3s;
  opacity: 1;
}


/* Card Styles */
.card-hover {
  position: relative;
  aspect-ratio: 7/8;
  width: 100%;
  max-width: 350px;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  transition: background-image 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.overlay {
  position: absolute;
  inset: 0;
  transition: background-color 0.3s ease;
}
.card-hover-content {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.card-hover ul {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin-top: 20px;
  opacity: 0;
  visibility: hidden;
}
.card-hover:hover ul {
  opacity: 1;
  visibility: visible;
}
.card-hover ul li {
  margin-bottom: 8px;
}
.card-hover ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.card-hover ul li a:hover {
  text-decoration: underline;
}
.card-face {
  background-image: url('../images/Frame-1.png');
}
.card-face:hover {
  background:black;
}
.card-face .card-hover-content::after {
  content: "FACE";
}
.card-face:hover .card-hover-content::after {
  content: "GLOW UP";
}
.card-body {
  background-image: url('../images/Frame-1-2.png');
}
.card-body:hover {
   background:black;
}
.card-body .card-hover-content::after {
  content: "BODY";
}
.card-body:hover .card-hover-content::after {
  content: "FIT SHAPE";
}
.card-skin {
  background-image: url('../images/Frame-1-3.png');
}
.card-skin:hover {
   background:black;
}
.card-skin .card-hover-content::after {
  content: "SKIN";
}
.card-skin:hover .card-hover-content::after {
  content: "CLEAR SKIN";
}
.card-laser {
  background-image: url('../images/Frame-1-1.png');
}
.card-laser:hover {
   background:black;
}
.card-laser .card-hover-content::after {
  content: "LASER";
}
.card-laser:hover .card-hover-content::after {
  content: "LASER";
}
.services-section{
  background:linear-gradient(to Top,#000000,#f7f0f0,#fff)
}

/* Service Section Black/White Alternating Styles */
.face-service-section,
.body-service-section {
  background: #111;
  color: #fff;
  position: relative;
}
.face-service-section .etched-svg,
.body-service-section .etched-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  overflow: hidden;
  z-index: 1;
}
.face-service-section .container,
.body-service-section .container {
  position: relative;
  z-index: 2;
}
.laser-service-section,
.skin-service-section {
  background: #fff;
  color: #111;
}
.card-hover:hover .service-btn {
  visibility: visible;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  z-index: 1;
}
.service-btn {
  visibility: hidden;
}

/* Face Services Section Styling */
.face-service-section {
  background: #181818;
  color: #fff;
  position: relative;
  padding-top: 0;
  padding-bottom: 60px;
}

.face-service-section .etched-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -2px;
}

.face-service-section h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: #fff;
  letter-spacing: 1px;
}

.face-service-section ul {
  list-style: none;
  padding-left: 0;
}

.face-service-section ul li {
  background: rgba(255,255,255,0.05);
  margin-bottom: 10px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 1.05rem;
  transition: background 0.2s;
}

.face-service-section ul li:hover {
  background: rgba(255,255,255,0.12);
}

.face-service-section strong {
  color: #D3D3D3;
  font-weight: 600;
}

@media (max-width: 991px) {
  .face-service-section .col-lg-6 {
    margin-bottom: 32px;
  }
}

/* Hair Card */
.card-hair {
  background-image: url('../images/HAIR1.jpg');
}
.card-hair:hover {
  background:black
}
.card-hair .card-hover-content::after {
  content: "HAIR";
}
.card-hair:hover .card-hover-content::after {
  content: "STRONG HAIR";
}

/* Eco Card */
.card-eco {
  background-image: url('../images/ecospa.jpg');
}
.card-eco:hover {
  background: black;
}
.card-eco .card-hover-content::after {
  content: "ECO";
}
.card-eco:hover .card-hover-content::after {
  content: "ECO SPA";
}

/* Diet Card */
.card-diet {
  background-image: url('../images/Frame-1-7.png');
}
.card-diet:hover {
  background: black;
}
.card-diet .card-hover-content::after {
  content: "DIET";
}
.card-diet:hover .card-hover-content::after {
  content: "NUTRITION";
}

/* Spa Card */
.card-spa {
  background-image: url('../images/');
}
.card-spa:hover {
  background: black;
}
.card-spa .card-hover-content::after {
  content: "SPA";
}
.card-spa:hover .card-hover-content::after {
  content: "RELAX";
}

/* Luxury Treatments Card */
.card-luxury {
  background-image: url('../images/luxury.jpeg');
}
.card-luxury:hover {
  background: black;
}
.card-luxury .card-hover-content::after {
  content: "LUXURY";
}
.card-luxury:hover .card-hover-content::after {
  content: "TREATMENTS";
}

/* PMU Card */
.card-pmu {
  background-image: url('../images/pmu.jpg');
}
.card-pmu:hover {
  background: black;
}
.card-pmu .card-hover-content::after {
  content: "PMU";
}
.card-pmu:hover .card-hover-content::after {
  content: "PERMANENT MAKEUP";
}

/* Skinwood Exclusive Accessories Card */
.card-accessories {
  background-image: url('../images/accessories.png');
}
.card-accessories:hover {
  background: black;
}
.card-accessories .card-hover-content::after {
  content: "ACCESSORIES";
}
.card-accessories:hover .card-hover-content::after {
  content: "EXCLUSIVE";
}