body{
font-family: Arial;
margin:0;
background:#111;
color:white;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:black;
}

nav a{
color:white;
margin:10px;
text-decoration:none;
}

.hero{
text-align:center;
padding:100px 20px;
background:url("https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f") center/cover;
}

.hero button{
padding:10px 25px;
background:#f5b400;
border:none;
cursor:pointer;
}

.whatsapp{
display:inline-block;
margin-left:10px;
background:#25D366;
padding:10px 20px;
color:white;
text-decoration:none;
}

.section{
padding:60px 20px;
text-align:center;
}

.dark{
background:#1a1a1a;
}

.service-box{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.card{
background:#222;
padding:20px;
width:200px;
border-radius:10px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.gallery img{
width:100%;
border-radius:10px;
}

.before-after{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.before-after img{
width:250px;
border-radius:10px;
}

.review-box{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.review{
background:#222;
padding:20px;
border-radius:10px;
width:200px;
}

form{
display:flex;
flex-direction:column;
max-width:400px;
margin:auto;
gap:10px;
}

form input,form select{
padding:10px;
}

form button{
background:#f5b400;
border:none;
padding:10px;
cursor:pointer;
}

footer{
text-align:center;
padding:20px;
background:black;
}
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}

.gallery img{
width:100%;
height:250px;
object-fit:cover;
border-radius:10px;
transition:0.4s;
}

.gallery img:hover{
transform:scale(1.05);
}
.ba-container{
position:relative;
width:500px;
max-width:90%;
margin:auto;
overflow:hidden;
border-radius:12px;
}

.ba-container img{
width:100%;
display:block;
}

.before-wrapper{
position:absolute;
top:0;
left:0;
width:50%;
overflow:hidden;
}

.before{
width:100%;
}

.after{
width:100%;
}

#slider{
position:absolute;
top:50%;
left:0;
width:100%;
transform:translateY(-50%);
appearance:none;
background:none;
}

#slider::-webkit-slider-thumb{
appearance:none;
width:18px;
height:18px;
background:#f5c518;
border-radius:50%;
cursor:pointer;
}
.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
font-size:28px;
padding:14px 18px;
border-radius:50%;
text-decoration:none;
box-shadow:0 5px 15px rgba(0,0,0,0.4);
z-index:999;
}
.admin-panel{
text-align:center;
margin:40px;
}

.admin-panel button{
background:black;
color:white;
padding:12px 25px;
border:none;
font-size:16px;
cursor:pointer;
}

table{
margin-top:30px;
border-collapse:collapse;
}

th,td{
padding:12px;
text-align:center;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
}

/* Book Appointment button (yellow/gold) */
.btn[href^="#booking"] {
  background: linear-gradient(90deg, #FFC107, #FFB300);
  color: #000;
  box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

.btn[href^="#booking"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.6);
}

/* WhatsApp button (green) */
.btn.whatsapp {
  background: linear-gradient(90deg, #25D366, #1DA851);
  color: #fff;
  margin-left: 10px;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.btn.whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.6);
}

/* Responsive for mobile */
@media screen and (max-width: 768px) {
  .btn {
    width: 100%;
    margin: 10px 0;
  }

  .btn.whatsapp {
    margin-left: 0;
  }
}