/* =========================================================
   Dhun Unisex Salon — Premium Theme
   Palette: White #FFFFFF | Black #111111 | Gold #D4AF37 | Beige #F8F5F0
========================================================= */

:root{
  --clr-white:#FFFFFF;
  --clr-black:#111111;
  --clr-gold:#D4AF37;
  --clr-gold-soft:#e9cd7a;
  --clr-beige:#F8F5F0;
  --shadow-soft: 0 15px 40px rgba(17,17,17,0.08);
  --shadow-hover: 0 20px 50px rgba(212,175,55,0.25);
  --radius-lg: 22px;
  --radius-md: 16px;
  --transition: all .35s cubic-bezier(.4,.2,.2,1);
}

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-family:'Poppins', sans-serif;
  color:var(--clr-black);
  background:var(--clr-white);
  overflow-x:hidden;
  max-width:100%;
}

img, iframe{max-width:100%;}

h1,h2,h3,h4,h5,.font-display{
  font-family:'Playfair Display', serif;
}

a{text-decoration:none;}

::selection{background:var(--clr-gold); color:var(--clr-white);}

/* Scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--clr-beige);}
::-webkit-scrollbar-thumb{background:var(--clr-gold); border-radius:10px;}

/* Section helpers */
.section-pad{padding:90px 0;}
.bg-beige{background:var(--clr-beige);}
.bg-black{background:var(--clr-black);}
.text-gold{color:var(--clr-gold) !important;}
.section-tag{
  display:inline-block;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:.8rem;
  font-weight:600;
  color:var(--clr-gold);
  margin-bottom:12px;
}
.section-title{
  font-weight:700;
  font-size:2.4rem;
  margin-bottom:18px;
}
.section-desc{
  color:#555;
  max-width:650px;
}
.mx-auto-text{margin-left:auto; margin-right:auto;}

/* Buttons */
.btn-gold{
  background:linear-gradient(135deg,var(--clr-gold),var(--clr-gold-soft));
  color:var(--clr-black);
  border:none;
  font-weight:600;
  padding:12px 32px;
  border-radius:50px;
  letter-spacing:.5px;
  transition:var(--transition);
  box-shadow:0 8px 20px rgba(212,175,55,.35);
}
.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 30px rgba(212,175,55,.45);
  color:var(--clr-black);
}
.btn-outline-gold{
  border:2px solid var(--clr-gold);
  color:var(--clr-gold);
  background:transparent;
  font-weight:600;
  padding:10px 30px;
  border-radius:50px;
  transition:var(--transition);
}
.btn-outline-gold:hover{
  background:var(--clr-gold);
  color:var(--clr-black);
  transform:translateY(-3px);
}
.btn-outline-light-custom{
  border:2px solid #fff;
  color:#fff;
  background:transparent;
  font-weight:600;
  padding:10px 30px;
  border-radius:50px;
  transition:var(--transition);
}
.btn-outline-light-custom:hover{
  background:#fff;
  color:var(--clr-black);
  transform:translateY(-3px);
}
.btn-sm-action{
  font-size:.82rem;
  padding:8px 18px;
  border-radius:50px;
  font-weight:600;
  transition:var(--transition);
}

/* =============== NAVBAR =============== */
.navbar-custom{
  padding:18px 0;
  transition:var(--transition);
  background:transparent;
}
.navbar-custom.scrolled{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  box-shadow:0 5px 25px rgba(0,0,0,.08);
  padding:10px 0;
}
.navbar-brand-custom{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:1.6rem;
  color:var(--clr-white);
  transition:var(--transition);
}
.navbar-brand-custom span{color:var(--clr-gold);}
.navbar-custom.scrolled .navbar-brand-custom{color:var(--clr-black);}

.navbar-custom .nav-link{
  color:var(--clr-white);
  font-weight:500;
  margin:0 12px;
  position:relative;
  transition:var(--transition);
}
.navbar-custom.scrolled .nav-link{color:var(--clr-black);}
.navbar-custom .nav-link::after{
  content:'';
  position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:var(--clr-gold);
  transition:var(--transition);
}
.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after{width:100%;}
.navbar-custom .nav-link:hover{color:var(--clr-gold);}
.navbar-custom .nav-link.active{color:var(--clr-gold);}
.navbar-custom.scrolled .nav-link.active{color:var(--clr-gold);}

.navbar-custom.scrolled .navbar-toggler,
.navbar-toggler{border:none; box-shadow:none;}
.navbar-toggler-icon-custom{
  color:var(--clr-white);
  font-size:1.5rem;
}
.navbar-custom.scrolled .navbar-toggler-icon-custom{color:var(--clr-black);}

.btn-call-nav{
  background:var(--clr-gold);
  color:var(--clr-black);
  font-weight:600;
  padding:9px 22px;
  border-radius:50px;
  font-size:.9rem;
  transition:var(--transition);
}
.btn-call-nav:hover{
  background:var(--clr-black);
  color:var(--clr-gold);
}

/* =============== HERO SLIDER =============== */
.hero-slider{position:relative; height:100vh; min-height:600px;}
.hero-slider .carousel-item{
  height:100vh; min-height:600px;
  background-size:cover;
  background-position:center;
}
.hero-slider .carousel-item::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.55), rgba(17,17,17,.75));
}
.hero-caption{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:0 20px;
}
.hero-caption .subtitle{
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--clr-gold);
  font-weight:600;
  font-size:.9rem;
  margin-bottom:18px;
}
.hero-caption h1{
  font-size:3.2rem;
  font-weight:700;
  max-width:900px;
  margin-bottom:20px;
  line-height:1.25;
}
.hero-caption p{
  max-width:640px;
  font-size:1.1rem;
  margin-bottom:35px;
  color:#eee;
}
.hero-caption .hero-btns{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
}
.hero-slider .carousel-indicators [data-bs-target]{
  background-color:var(--clr-gold);
  width:10px; height:10px;
  border-radius:50%;
}
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{
  width:60px; height:60px;
  top:50%; transform:translateY(-50%);
  background:rgba(212,175,55,.25);
  border-radius:50%;
  backdrop-filter:blur(6px);
  opacity:.8;
}
.hero-slider .carousel-control-prev{left:30px;}
.hero-slider .carousel-control-next{right:30px;}
.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover{opacity:1; background:var(--clr-gold);}

/* Scroll cue */
.scroll-cue{
  position:absolute;
  bottom:30px; left:50%; transform:translateX(-50%);
  z-index:3;
  color:#fff;
  font-size:1.5rem;
  animation:bounce 2s infinite;
}
@keyframes bounce{
  0%,100%{transform:translate(-50%,0);}
  50%{transform:translate(-50%,10px);}
}

/* =============== ABOUT =============== */
.about-img-wrap{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.about-img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.about-img-wrap:hover img{transform:scale(1.06);}
.about-badge{
  position:absolute;
  bottom:20px; right:20px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,.4);
  border-radius:var(--radius-md);
  padding:18px 24px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.about-badge h3{
  color:var(--clr-gold);
  font-weight:700;
  margin-bottom:0;
  font-size:1.8rem;
}
.about-badge span{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#555;
}
.about-list li{
  padding:8px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.about-list i{color:var(--clr-gold);}
.about-highlight-row{margin-top:28px;}
.about-highlight{
  position:relative;
  isolation:isolate;
  min-height:154px;
  overflow:hidden;
  background:linear-gradient(145deg,#fff 0%,#fffaf0 100%);
  border:1px solid rgba(212,175,55,.26);
  border-radius:18px;
  padding:25px 14px 20px;
  text-align:center;
  box-shadow:0 10px 28px rgba(35,27,15,.08);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.about-highlight::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:110px;
  height:110px;
  top:-70px;
  right:-55px;
  border-radius:50%;
  background:rgba(212,175,55,.13);
  transition:transform .4s ease;
}
.about-highlight::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:3px;
  transform:translateX(-50%);
  border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--clr-gold-soft),var(--clr-gold));
  transition:width .3s ease;
}
.about-highlight:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 34px rgba(35,27,15,.16);
  border-color:var(--clr-gold);
}
.about-highlight:hover::before{transform:scale(1.35);}
.about-highlight:hover::after{width:62%;}
.about-highlight-icon{
  width:62px; height:62px;
  margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(135deg,#f9e6a0,var(--clr-gold));
  color:var(--clr-black);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem;
  border:4px solid rgba(255,255,255,.78);
  box-shadow:0 7px 16px rgba(166,126,17,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.about-highlight:hover .about-highlight-icon{transform:rotate(-8deg) scale(1.08); box-shadow:0 10px 20px rgba(166,126,17,.35);}
.about-highlight span{
  display:block;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.025em;
  color:var(--clr-black);
}

/* =============== SERVICE CARDS =============== */
.service-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  transition:var(--transition);
  height:100%;
  border:1px solid rgba(212,175,55,.12);
}
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-hover);
}
.service-img{
  position:relative;
  height:230px;
}
.service-img-inner{
  width:100%; height:100%;
  overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.service-img-inner img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.service-card:hover .service-img-inner img{transform:scale(1.1);}
.service-icon{
  position:absolute;
  bottom:-26px; left:24px;
  width:56px; height:56px;
  background:var(--clr-gold);
  color:var(--clr-black);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  box-shadow:0 8px 20px rgba(212,175,55,.4);
  border:4px solid #fff;
  z-index:2;
}
.service-body{
  padding:38px 24px 24px;
}
.service-body h4{
  font-weight:700;
  margin-bottom:10px;
  font-size:1.2rem;
}
.service-body p{
  color:#666;
  font-size:.92rem;
  min-height:66px;
}
.service-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.service-actions .btn-sm-action{flex:1; text-align:center;}
.btn-call-svc{
  background:var(--clr-black);
  color:#fff;
}
.btn-call-svc:hover{background:var(--clr-gold); color:var(--clr-black);}
.btn-enquire-svc{
  background:transparent;
  border:1.5px solid var(--clr-gold);
  color:var(--clr-black);
}
.btn-enquire-svc:hover{background:var(--clr-gold); color:#fff;}

/* =============== WHY CHOOSE US =============== */
.why-card{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(14px);
  border:1px solid rgba(212,175,55,.25);
  border-radius:var(--radius-lg);
  padding:36px 28px;
  text-align:center;
  height:100%;
  transition:var(--transition);
  box-shadow:0 10px 30px rgba(17,17,17,.05);
}
.why-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-hover);
}
.why-icon{
  width:70px; height:70px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--clr-gold),var(--clr-gold-soft));
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
  color:var(--clr-black);
}
.why-card h4{font-weight:700; font-size:1.15rem; margin-bottom:10px;}
.why-card p{color:#666; font-size:.9rem; margin-bottom:0;}

/* =============== CTA BANNER =============== */
.cta-banner{
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:110px 0;
  text-align:center;
  color:#fff;
}
.cta-banner::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(17,17,17,.72);
}
.cta-banner .cta-content{position:relative; z-index:2;}
.cta-banner h2{font-size:2.6rem; font-weight:700; margin-bottom:16px;}
.cta-banner p{font-size:1.05rem; margin-bottom:32px; color:#eee;}
.cta-banner .hero-btns{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}

/* =============== CONTACT =============== */
.contact-map{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  height:100%;
  min-height:420px;
}
.contact-map iframe{width:100%; height:100%; min-height:420px; border:0;}
.contact-card{
  background:linear-gradient(145deg,#fff,var(--clr-beige));
  border-radius:var(--radius-lg);
  padding:44px;
  box-shadow:var(--shadow-soft);
  height:100%;
  border:1px solid rgba(212,175,55,.2);
}
.contact-card h3{font-weight:700; margin-bottom:24px;}
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
}
.contact-item .icon-box{
  width:46px; height:46px;
  flex-shrink:0;
  background:var(--clr-gold);
  color:var(--clr-black);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.contact-item p, .contact-item a{margin-bottom:0; color:#333;}
.contact-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}

/* =============== FOOTER =============== */
.footer-custom{
  background:var(--clr-black);
  color:#ccc;
}
.footer-bottom{
  padding:22px 0;
  text-align:center;
  font-size:.85rem;
  color:#888;
}

/* =============== FLOATING BUTTONS =============== */
.floating-btns{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1050;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.floating-btns a{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  color:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.3);
  transition:var(--transition);
  animation:pulse-btn 2.4s infinite;
}
.floating-btns a:hover{transform:scale(1.12);}
.fab-call{background:var(--clr-gold); color:var(--clr-black) !important;}
@keyframes pulse-btn{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.5);}
  70%{box-shadow:0 0 0 14px rgba(212,175,55,0);}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0);}
}

/* Floating Enquire Now — rotated vertical tab, centered on right side */
.fab-enquire-wrap{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  z-index:1050;
}
.fab-enquire{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  background:linear-gradient(135deg,var(--clr-gold),var(--clr-gold-soft));
  color:var(--clr-black);
  font-weight:600;
  font-size:.92rem;
  padding:14px 26px;
  border-radius:10px 10px 0 0;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
  transform:rotate(-90deg);
  transition:var(--transition);
}
.fab-enquire:hover{
  color:var(--clr-black);
  box-shadow:0 12px 30px rgba(212,175,55,.4);
  padding:14px 32px;
}
@media (max-width:575px){
  .fab-enquire-wrap{width:42px; height:42px;}
  .fab-enquire{
    font-size:.8rem;
    padding:10px 18px;
  }
  .fab-enquire:hover{padding:10px 22px;}
}

/* =============== ENQUIRY MODAL =============== */
.modal-enquire .modal-content{
  border-radius:var(--radius-lg);
  border:none;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);
  box-shadow:0 30px 70px rgba(0,0,0,.3);
}
.modal-enquire .modal-header{
  border-bottom:1px solid rgba(212,175,55,.2);
  padding:24px 30px 14px;
}
.modal-enquire .modal-title{
  font-weight:700;
  color:var(--clr-black);
}
.modal-enquire .modal-title span{color:var(--clr-gold);}
.modal-enquire .modal-body{padding:20px 30px 30px;}
.modal-enquire .form-control{
  border-radius:12px;
  border:1px solid #ddd;
  padding:12px 16px;
  margin-bottom:16px;
}
.modal-enquire .form-control:focus{
  border-color:var(--clr-gold);
  box-shadow:0 0 0 .2rem rgba(212,175,55,.2);
}
.modal-enquire .btn-gold{width:100%;}

/* =============== GALLERY =============== */
.gallery-item{
  border-radius:var(--radius-md);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-soft);
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.gallery-item img{
  width:100%; height:230px;
  object-fit:cover;
  transition:transform .6s ease;
}
.gallery-item:hover img{transform:scale(1.12);}
.gallery-item::after{
  content:'\f00e';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.6rem;
  background:rgba(17,17,17,0);
  opacity:0;
  transition:var(--transition);
}
.gallery-item:hover::after{
  background:rgba(17,17,17,.45);
  opacity:1;
}
.gallery-item:focus-visible{outline:3px solid var(--clr-gold); outline-offset:3px;}
.gallery-modal .modal-content{background:rgba(17,17,17,.96); border:0;}
.gallery-modal .modal-header{padding:16px 20px; color:#fff;}
.gallery-modal .modal-title span{color:var(--clr-gold); margin-left:8px;}
.gallery-modal .modal-body{position:relative; display:flex; align-items:center; justify-content:center; padding:0 64px 24px; min-height:300px;}
.gallery-modal #galleryModalImage{max-height:78vh; width:auto; object-fit:contain; border-radius:var(--radius-sm);}
.gallery-modal-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--clr-black); transition:var(--transition);}
.gallery-modal-nav:hover{background:var(--clr-gold); color:#fff;}
.gallery-modal-prev{left:12px;}
.gallery-modal-next{right:12px;}

/* =============== RESPONSIVE =============== */
@media (max-width:991px){
  .hero-caption h1{font-size:2.2rem;}
  .section-title{font-size:1.9rem;}
  .navbar-custom{background:rgba(255,255,255,.95); backdrop-filter:blur(10px);}
  .navbar-custom .navbar-brand-custom,
  .navbar-custom .nav-link{color:var(--clr-black);}
  .navbar-toggler-icon-custom{color:var(--clr-black);}
  .cta-banner{background-attachment:scroll;}
}
@media (max-width:575px){
  html, body{width:100%; overflow-x:hidden;}
  .container, .container-fluid{max-width:100%;}
  .hero-caption h1{font-size:1.7rem;}
  .hero-caption p{font-size:.95rem;}
  .section-pad{padding:60px 0;}
  .about-badge{padding:12px 16px;}
  .floating-btns a{width:48px; height:48px; font-size:1.25rem;}
  .gallery-modal .modal-body{padding:0 48px 20px;}
  .gallery-modal-nav{width:36px; height:36px;}
}