/* =========================================================================
   G3 LUXURY SALON — BLACK & GOLD PREMIUM THEME
   Override layer. Loaded AFTER style.css. Restyles UI only.
   No content, structure, links, forms, or SEO markup is touched anywhere
   in this file — selectors are pure presentation.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --g3-bg:           #050505;
  --g3-bg-soft:      #0E0E0E;
  --g3-card:         #161616;
  --g3-gold:         #D4AF37;
  --g3-gold-soft:    #F3D27A;
  --g3-white:        #FFFFFF;
  --g3-text-soft:    #D6D6D6;
  --g3-border:       rgba(212,175,55,.25);
  --g3-glow:         rgba(212,175,55,.45);

  --g3-font-head: "Playfair Display", "Playfair", serif;
  --g3-font-body: "Poppins", "DM Sans", sans-serif;

  --g3-radius: 20px;
  --g3-ease: cubic-bezier(.4,0,.2,1);
}

/* =========================================================================
   0. BASE / RESET LAYER
   ========================================================================= */
body{
  background-color: var(--g3-bg) !important;
  color: var(--g3-text-soft);
  font-family: var(--g3-font-body);
}

h1,h2,h3,h4,h5,h6,
.vertical, .vertical-white,
.hero-text-1, .hero-text,
.testimonial-card h5,
.footer h2, .footer h4{
  font-family: var(--g3-font-head) !important;
  color: var(--g3-white);
  letter-spacing: .01em;
}

p, span, li, a, label, input, textarea, select{
  font-family: var(--g3-font-body);
}

a{ color: var(--g3-gold); }
a:hover{ color: var(--g3-gold-soft); }

::selection{ background: var(--g3-gold); color: #050505; }

/* subtle luxury scroll-bar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--g3-bg); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--g3-gold), var(--g3-gold-soft));
  border-radius: 10px;
}

/* page loader recolor */
.loader-container{ background: var(--g3-bg) !important; }
.loader{
  border-color: var(--g3-border) !important;
  border-top-color: var(--g3-gold) !important;
}

/* ambient backdrop: soft radial gold glows + faint noise, fixed so it
   sits behind every section without altering layout/markup */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%,  rgba(212,175,55,.07), transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(212,175,55,.05), transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(212,175,55,.05), transparent 45%);
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
section, header, footer, .container{ position: relative; z-index: 1; }

/* sub-heading eyebrow label with the signature animated gold line */
.sub-heading{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--g3-gold) !important;
  font-family: var(--g3-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.sub-heading::before{
  content:"";
  display: inline-block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--g3-gold), var(--g3-gold-soft));
  transition: width .9s var(--g3-ease);
}
.sub-heading.g3-in::before{ width: 46px; }

/* vertical side labels */
.vertical, .vertical-white{
  color: var(--g3-border) !important;
  opacity: .55;
}

/* =========================================================================
   1. HEADER / NAVIGATION
   ========================================================================= */
#header{
  background: transparent;
  transition: background-color .4s var(--g3-ease), box-shadow .4s var(--g3-ease), backdrop-filter .4s var(--g3-ease);
  border-bottom: 1px solid transparent;
}
#header.g3-scrolled{
  background-color: rgba(5,5,5,.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--g3-border);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

#header .menu > li > a, #header .menu > li > span{
  position: relative;
  color: var(--g3-white) !important;
  font-family: var(--g3-font-body);
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .3s var(--g3-ease);
}
#header .menu > li > a::after{
  content:"";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--g3-gold);
  transition: width .35s var(--g3-ease);
}
#header .menu > li > a:hover{ color: var(--g3-gold-soft) !important; }
#header .menu > li > a:hover::after{ width: 100%; }

/* gold active indicator */
#header .menu > li.active > a,
#header .menu > li > a[aria-current="page"]{ color: var(--g3-gold) !important; }
#header .menu > li.active > a::after{ width: 100%; }

#header .submenu-dropdown{
  background: var(--g3-card) !important;
  border: 1px solid var(--g3-border);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
#header .submenu-dropdown a{ color: var(--g3-text-soft) !important; }
#header .submenu-dropdown a:hover{ color: var(--g3-gold) !important; }

#header .primary-btn,
.mobile-menu .primary-btn,
#header a.btn{
  background: var(--g3-bg) !important;
  border: 1px solid var(--g3-gold) !important;
  color: var(--g3-gold-soft) !important;
  box-shadow: 0 0 0 rgba(212,175,55,0);
  transition: box-shadow .3s var(--g3-ease), transform .3s var(--g3-ease), background-color .3s var(--g3-ease);
}
#header .primary-btn:hover,
#header a.btn:hover{
  background: var(--g3-gold) !important;
  color: #0a0a0a !important;
  box-shadow: 0 0 22px var(--g3-glow);
  transform: translateY(-2px);
}

.toggle-menu{ color: var(--g3-gold) !important; }
.mobile-menu{ background: var(--g3-bg) !important; border-right: 1px solid var(--g3-border); }
.mobile-menu .menu > li > a{ color: var(--g3-white) !important; border-bottom: 1px solid var(--g3-border); }
.mobile-menu .menu > li > a:hover{ color: var(--g3-gold) !important; }
.mobile-menu-overlay{ background: rgba(0,0,0,.65) !important; backdrop-filter: blur(4px); }

.back-to-top{
  background: var(--g3-card) !important;
  border: 1px solid var(--g3-border) !important;
  color: var(--g3-gold) !important;
  transition: all .3s var(--g3-ease);
}
.back-to-top:hover{ box-shadow: 0 0 18px var(--g3-glow); transform: translateY(-3px); }

/* =========================================================================
   2. HERO / BANNER
   ========================================================================= */
.banner{ background-color: var(--g3-bg) !important; overflow: hidden; }
.banner .bg-shadow{
  background: linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,.78) 62%, rgba(5,5,5,.97) 100%) !important;
}
.banner .banner-img img{
  filter: grayscale(.15) contrast(1.08) brightness(.78);
  transform: scale(1.04);
}
.banner .line, .banner .line-right{ background: var(--g3-border) !important; }

.banner .hero-sub-heading{
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--g3-gold-soft);
  font-weight: 600; font-size: 13px; letter-spacing: .25em; text-transform: uppercase;
}
.banner .hero-sub-heading::before{
  content:""; width: 38px; height: 1px;
  background: linear-gradient(90deg, var(--g3-gold), transparent);
}

.banner .hero-text-1{
  font-family: var(--g3-font-head) !important;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  background: linear-gradient(95deg, #fff 0%, #fff 35%, var(--g3-gold-soft) 68%, var(--g3-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 8px 40px rgba(212,175,55,.18);
}
.banner .hero-text{ color: var(--g3-text-soft) !important; font-weight: 400; }
.banner p{ color: var(--g3-text-soft) !important; }

.banner .side-text h3.vertical{ color: var(--g3-border) !important; opacity: .6; }
.banner-down-arrow{
  color: var(--g3-gold) !important;
  animation: g3Bounce 2.2s ease-in-out infinite;
}
@keyframes g3Bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } }

/* =========================================================================
   3. BUTTONS
   ========================================================================= */
.primary-btn, a.primary-btn{
  position: relative;
  background: #0a0a0a !important;
  border: 1px solid var(--g3-gold) !important;
  color: var(--g3-gold-soft) !important;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--g3-ease), box-shadow .3s var(--g3-ease), color .3s var(--g3-ease);
}
.primary-btn::before{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--g3-gold), var(--g3-gold-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--g3-ease);
  z-index: -1;
}
.primary-btn:hover{
  color: #0a0a0a !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px var(--g3-glow);
}
.primary-btn:hover::before{ transform: scaleX(1); }

.outline-btn, a.outline-btn{
  background: transparent !important;
  border: 1px solid var(--g3-border) !important;
  color: var(--g3-gold) !important;
  border-radius: 999px;
  transition: all .3s var(--g3-ease);
}
.outline-btn:hover{
  border-color: var(--g3-gold) !important;
  background: rgba(212,175,55,.08) !important;
  box-shadow: 0 0 24px rgba(212,175,55,.18);
  transform: translateY(-2px);
}

/* ripple micro-interaction (JS adds .g3-ripple span on click) */
.primary-btn .g3-ripple, .outline-btn .g3-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: g3Ripple .6s linear;
  pointer-events: none;
}
@keyframes g3Ripple{ to{ transform: scale(2.6); opacity: 0; } }

/* =========================================================================
   4. CARDS — services / gallery / pricing / blog / testimonial / FAQ
   ========================================================================= */
.service-card,
.whychoose-card,
.testimonial-card,
.pricing-list-area .item,
.accordion-item,
.footer-card{
  background: var(--g3-card) !important;
  border: 1px solid var(--g3-border) !important;
  border-radius: var(--g3-radius) !important;
  transition: transform .35s var(--g3-ease), box-shadow .35s var(--g3-ease), border-color .35s var(--g3-ease);
}

.service-card{ padding: 36px 28px !important; }
.service-card:hover{
  transform: translateY(-8px) scale(1.015);
  border-color: var(--g3-gold) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.5), 0 0 28px rgba(212,175,55,.18);
}
.service-card img{ filter: drop-shadow(0 6px 14px rgba(212,175,55,.25)); transition: transform .4s var(--g3-ease); }
.service-card:hover img{ transform: translateY(-4px) scale(1.06); }
.service-card h4{ color: var(--g3-white) !important; font-size: 1.15rem; }
.service-card p{ color: var(--g3-text-soft) !important; }
.service-card a{ text-decoration: none; }

.whychoose-card{ padding: 56px !important; }
.why-list li{
  color: var(--g3-text-soft);
  list-style: none;
  padding-left: 4px;
}
.why-list li::marker{ color: var(--g3-gold); }

/* pricing */
.pricing-list-area .item{ padding: 22px 26px !important; margin-bottom: 14px; }
.pricing-list-area .name{ color: var(--g3-white) !important; }
.pricing-list-area .price{ color: var(--g3-gold) !important; font-weight: 700; }
.pricing-list-area .dashed-line{
  border-top: 1px dashed var(--g3-border) !important;
  flex: 1;
}
.pricing-list-area ul li{ color: var(--g3-text-soft); }

/* testimonials — glass cards */
.testimonial-card{
  background: rgba(22,22,22,.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 40px !important;
  position: relative;
  border: 1px solid var(--g3-border) !important;
}
.testimonial .testimonial-inner{
  background-color: transparent !important;
}
.testimonial-card.bg2{ background-color: var(--g3-card) !important; }
.testimonial-card.bg1{ background-color: rgba(22,22,22,.6) !important; }
.testimonial-card p{ color: var(--g3-text-soft) !important; }
.testimonial-card .quote{ opacity: .15; filter: invert(1) sepia(1) saturate(4) hue-rotate(10deg); }
.testimonial-card h5{ color: var(--g3-white) !important; }
.testimonial-card span{ color: var(--g3-gold-soft); }

/* gallery cards */
.project-card{
  display: block;
  border-radius: var(--g3-radius);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--g3-border);
}
.project-card img{ transition: transform .5s var(--g3-ease), filter .5s var(--g3-ease); }
.project-card .info{
  background: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,.85) 100%) !important;
  opacity: 0;
  transition: opacity .4s var(--g3-ease);
}
.project-card:hover .info{ opacity: 1; }
.project-card:hover img{ transform: scale(1.08); filter: brightness(.85) saturate(1.1); }
.project-card .plus-icon{
  background: var(--g3-gold) !important;
  color: #0a0a0a !important;
  border-radius: 50%;
  transition: transform .35s var(--g3-ease);
}
.project-card:hover .plus-icon{ transform: rotate(90deg) scale(1.1); }
/* hover shine sweep */
.project-card::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 48%, transparent 56%);
  transform: translateX(-120%);
  transition: transform .7s var(--g3-ease);
  pointer-events: none;
}
.project-card:hover::after{ transform: translateX(120%); }

/* accordion / FAQ */
.accordion-item{ overflow: hidden; }
.accordion-button{
  background: transparent !important;
  color: var(--g3-white) !important;
  font-family: var(--g3-font-body);
  font-weight: 500;
  padding: 22px 26px !important;
}
.accordion-button::after{ filter: invert(1) sepia(1) saturate(6) hue-rotate(10deg) brightness(1.3); }
.accordion-button:not(.collapsed){ color: var(--g3-gold) !important; }
.accordion-body{ color: var(--g3-text-soft) !important; padding: 0 26px 22px !important; }

/* =========================================================================
   5. SECTION BACKGROUNDS / DIVIDERS
   ========================================================================= */
.services, .whychoose, .pricing-section, .gallery, .testimonial,
section.py-5, #faq, .faq{
  background-color: var(--g3-bg) !important;
}
.services{ background-color: var(--g3-bg-soft) !important; }
.testimonial{
  background-blend-mode: multiply;
  background-color: rgba(5,5,5,.9) !important;
}
.testimonial::before{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5,5,5,.96), rgba(5,5,5,.7));
  z-index: 0;
}

/* gold gradient divider between sections */
.g3-divider{
  height: 1px;
  margin: 0 auto;
  width: min(86%, 1100px);
  background: linear-gradient(90deg, transparent, var(--g3-border) 20%, var(--g3-gold) 50%, var(--g3-border) 80%, transparent);
  opacity: .8;
}

/* stat blocks (numbers section) — recolor inline-styled boxes into the gold system */
section.py-5 .rounded[style*="background-color"]{
  background: var(--g3-card) !important;
  border: 1px solid var(--g3-border) !important;
  transition: transform .3s var(--g3-ease), border-color .3s var(--g3-ease);
}
section.py-5 .rounded[style*="background-color"]:hover{
  transform: translateY(-4px);
  border-color: var(--g3-gold) !important;
}
section.py-5 .rounded h2{ color: var(--g3-gold) !important; }
section.py-5 .rounded p{ color: var(--g3-text-soft) !important; }
section.py-5 h2{ color: var(--g3-white) !important; }
section.py-5 p{ color: var(--g3-text-soft) !important; }
section.py-5 img.rounded{ border: 1px solid var(--g3-border); }

/* =========================================================================
   6. FORMS
   ========================================================================= */
#contact-form{
  background: var(--g3-card) !important;
  border: 1px solid var(--g3-border) !important;
  border-radius: var(--g3-radius) !important;
  padding: clamp(28px, 4vw, 56px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.salonix-input, select#service, .nice-select{
  background-color: #0c0c0c !important;
  border: 1px solid var(--g3-border) !important;
  color: var(--g3-white) !important;
  border-radius: 12px !important;
  transition: border-color .3s var(--g3-ease), box-shadow .3s var(--g3-ease);
}
.salonix-input::placeholder{ color: #8a8a8a !important; }
.salonix-input:focus, select#service:focus{
  border-color: var(--g3-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.15) !important;
  outline: none;
}
#contact-form label{ color: var(--g3-text-soft) !important; font-size: .85rem; letter-spacing: .03em; }
#contact-form h3{ color: var(--g3-white) !important; }
.salonix-input::-webkit-calendar-picker-indicator,
.salonix-input::-webkit-clear-button,
.salonix-input::-webkit-inner-spin-button{
  filter: invert(1) brightness(1.4);
  cursor: pointer;
}
.nice-select .list{ background: var(--g3-card) !important; border: 1px solid var(--g3-border) !important; }
.nice-select .option:hover, .nice-select .option.selected{ background: rgba(212,175,55,.12) !important; color: var(--g3-gold) !important; }
.nice-select .current{ color: var(--g3-white) !important; }

/* =========================================================================
   7. FOOTER
   ========================================================================= */
.footer.footer-two{
  background: linear-gradient(180deg, var(--g3-bg-soft), var(--g3-bg)) !important;
  border-top: 1px solid var(--g3-border);
}
.footer h2, .footer h4{
  color: var(--g3-gold) !important;
  font-size: 1rem;
  letter-spacing: .08em;
}
.footer p, .footer a, .footer li{ color: var(--g3-text-soft) !important; }
.footer a:hover{ color: var(--g3-gold) !important; }
.footer .navigation-links a, .footer .contact-two a{ transition: color .25s var(--g3-ease), padding-left .25s var(--g3-ease); }
.footer .navigation-links a:hover{ padding-left: 4px; }
.footer .social-link a{
  background: var(--g3-card) !important;
  border: 1px solid var(--g3-border) !important;
  color: var(--g3-gold) !important;
  transition: all .3s var(--g3-ease);
}
.footer .social-link a:hover{
  background: var(--g3-gold) !important;
  color: #0a0a0a !important;
  box-shadow: 0 0 18px var(--g3-glow);
  transform: translateY(-3px);
}
.footer .contact-icon{ color: var(--g3-gold) !important; }
.footer .time{ color: var(--g3-gold-soft) !important; }
.footer-tags{ color: #777 !important; }
.footer-tags a{ color: var(--g3-text-soft) !important; }
.footer-tags a:hover{ color: var(--g3-gold) !important; }
.copyright-two{ border-top: 1px solid var(--g3-border); color: var(--g3-text-soft); }
.copyright-two p{ color: var(--g3-text-soft) !important; }
.copyright-two a{ color: var(--g3-gold-soft) !important; }

/* floating WhatsApp / call buttons — keep brand colours but add luxury ring */
.bot-div .social-media{
  box-shadow: 0 0 0 1px var(--g3-border), 0 8px 24px rgba(0,0,0,.45);
  transition: box-shadow .3s var(--g3-ease), transform .3s var(--g3-ease);
}
.bot-div .social-media:hover{ box-shadow: 0 0 0 1px var(--g3-gold), 0 0 22px var(--g3-glow); }

/* mouse-tracking gold highlight (vars set by luxury-theme.js) */
.service-card, .whychoose-card, .testimonial-card, .project-card{ position: relative; }
.service-card::before, .whychoose-card::before, .testimonial-card::before{
  content:"";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(212,175,55,.16), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--g3-ease);
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::before, .whychoose-card:hover::before, .testimonial-card:hover::before{ opacity: 1; }
.service-card > *, .whychoose-card > *{ position: relative; z-index: 1; }

/* =========================================================================
   8. SCROLL-REVEAL / ANIMATION HOOKS
   (classes toggled by luxury-theme.js via IntersectionObserver — purely
   additive, all elements are visible by default with no-js fallback)
   ========================================================================= */
.fade_up_anim, .g3-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--g3-ease), transform .8s var(--g3-ease);
}
.fade_up_anim.g3-in, .g3-reveal.g3-in{
  opacity: 1;
  transform: translateY(0);
}
.fade_up_anim.second{ transition-delay: .12s; }

/* NOTE: .reveal / .reveal--left / .reveal--right / .reveal--overlay are
   already animated by the site's existing app.js (GSAP ScrollTrigger).
   We do not redefine their motion here — only their colors, elsewhere
   in this file — to avoid fighting the working animation. */
.reveal.reveal--overlay{ background-color: rgba(5,5,5,.5) !important; }

.no-js .fade_up_anim, .no-js .g3-reveal{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .fade_up_anim, .g3-reveal, .reveal--right, .reveal--left{
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .banner-down-arrow{ animation: none !important; }
}

/* =========================================================================
   9. SECTION SPACING — premium breathing room
   ========================================================================= */
.services, .whychoose, .pricing-section, .gallery, .testimonial, section.py-5{
  padding-top: clamp(64px, 9vw, 140px);
  padding-bottom: clamp(64px, 9vw, 140px);
}

/* =========================================================================
   10. MOBILE REFINEMENT
   ========================================================================= */
@media (max-width: 991px){
  .banner .hero-text-1{ font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .service-card{ padding: 26px 20px !important; }
  .whychoose-card{ padding: 32px !important; }
}

/* =========================================================================
   11. INLINE-STYLE OVERRIDES
   The original markup carries inline colors tuned for a light theme
   (e.g. style="color:black") which vanish on the new dark background.
   These rules correct legibility only — no HTML is edited.
   ========================================================================= */
a[style*="color:black"], a[style*="color: black"],
a[style*="color:#000"], a[style*="color: #000"]{
  color: var(--g3-gold-soft) !important;
}
.kalapatti, .ganapathy{ color: var(--g3-text-soft) !important; }
i[style*="color:black"], i[style*="color: black"]{ color: #0a0a0a !important; }
@media (max-width: 767px){
  .bot-div .social-media{ width: 54px !important; height: 54px !important; }
}